<AI>
はい、ブラウザのHTMLやJavaScriptを使って、Canvasの描画コンテキストを取得したり、
画面やウィンドウのブラウジングコンテキストを扱ったりすることが可能です。
どのような「context(文脈・環境)」を出したいかによって実現方法が異なります。
代表的な2つのケースは以下の通りです。
1. Canvasの描画コンテキスト(CanvasRenderingContext2D / WebGL)
HTMLの <canvas> 要素に対して getContext() メソッドを実行すると、描画用のコンテキスト(API)を取得できます。
これを用いて、2Dの図形やアニメーションを描くことができます。
html
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
// 1. canvas要素を取得
const canvas = document.getElementById('myCanvas');
// 2. 2D描画用のコンテキスト(Context)を取得
const ctx = canvas.getContext('2d');
// 3. コンテキストを使って四角を描く
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 150, 80);
</script>
2. JavaScriptの実行コンテキスト(Execution Context)
JavaScriptがコードを処理・実行する際の「環境や状況(変数や this の値など)」を指します。
開発者が意識的に「出す」というより、ブラウザのJavaScriptエンジンが自動的に作成して管理しています。
大きく分けて以下の3種類があります:
グローバルコンテキスト: スクリプトが最初に読み込まれたときに作られる最も外側の環境(window オブジェクトなど)。
関数コンテキスト: 関数が呼び出されたときにその関数ごとに作られる環境。
変数や this の参照先などを理解するために重要ですが、画面上に直接文字として表示されるものではありません。
もし特定の機能(音声認識のコンテキスト、AIのチャット文脈、あるいはWeb Audio APIなど)を想定されている場合は
詳細をお知らせいただければ具体的なコードをご案内します。
5 件のサイト
JavaScriptの実行コンテキストを理解する #JavaScript - Qiit
2021/12/07 — 実行コンテキストとは、コードを実行する際の文脈や状況、つまりコードがどのような状況で実行されているのかを指します。コード...
Qiita
HTMLCanvasElement: getContext() メソッド - Web API | MDN
2025/06/24 — このコンテキストは、WebGL version 2 (OpenGL ES 3.0) を実装しているブラウザーでのみ利用で...MDN
Web Docs