getContext

うち知ル

getContextは、HTML5の<canvas>要素と組み合わせて使用されるメソッドです。getContextメソッドは、描画コンテキスト（2DやWebGLなど）を取得し、それを使用してキャンバス上に図形、テキスト、画像などを描画するためのメソッドやプロパティにアクセスします。

基本的な使い方

まず、<canvas>要素をHTMLに追加し、その要素をJavaScriptで取得します。その後、getContextメソッドを使用して描画コンテキストを取得します。

<body>
    <canvas id="canvas" width="800" height="600"></canvas>
    <script>
        // DOMオブジェクトを取得
        var canvas = document.getElementById('canvas');
        // getContextで2Dコンテキストを取得
        var context = canvas.getContext('2d');
    </script>
</body>

<canvas>要素をHTMLに追加
<canvas id="canvas" width="800" height="600"></canvas>
その要素をJavaScriptで取得
<script>~</script>
getContextメソッドを使用して描画コンテキストを取得
// DOMオブジェクトを取得
var canvas = document.getElementById('canvas');
// getContextで2Dコンテキストを取得
var context = canvas.getContext('2d');

getContextのパラメータ

getContextメソッドは、描画コンテキストの種類を指定するために1つのパラメータを受け取ります。一般的なコンテキストタイプは次の通りです：

2d:
2D描画コンテキスト。2次元の描画を行うためのメソッドやプロパティを提供します。
webgl:
WebGL描画コンテキスト。3Dグラフィックスを描画するためのインターフェースを提供します。
webgl2:
WebGL2描画コンテキスト。WebGLの拡張版で、より多くの機能と改善された性能を提供します。

WebGLとは

WebGLとは「Web Graphics Library」の略で、Webブラウザ上で3Dグラフィックスを描画するためのAPIです。
これにより、ウェブページ上でリッチで高度なグラフィックスやビジュアルエフェクトを実現することが可能になります。

この記事が気に入ったらサポートをしてみませんか？