canvasのgetContext("2d")って何
canvasのgetContext("2d")について調べたのでメモ。
HTMLとJavaScriptで図形を描画するには
<canvas>要素を用いる。<canvas>要素はgetContext()メソッドを持つ。getContext()メソッドは、グラフィックを描画するためのメソッドやプロパティをもつオブジェクトを返す。getContext()メソッドに引数"2d"を渡して実行すると、2Dグラフィックを描画するためのメソッドやプロパティをもつオブジェクトを返す。引数を
"webgl"とすると3Dグラフィックを描画するためのメソッドやプロパティをもつオブジェクトを返す。
<canvas id="canvas"></canvas>
// canvas要素を取得
const canvas = document.getElementById('canvas');
// canvas要素が持つgetContext()メソッドを実行し、
// グラフィック描画のためのメソッドやプロパティを
// 持つオブジェクトを取得する。
// 引数を"2d"とすることで2Dグラフィックの描画に
// 特化したメソッドやプロパティを持つオブジェクトを取得し、
// 定数ctxに格納する。
const ctx = canvas.getContext("2d");
// 定数ctxに格納したオブジェクトがもつプロパティやメソッドは
// ctx.プロパティ名、ctx.メソッド名() で呼び出せる
// 描画する色を指定するプロパティflillStyle
ctx.fillStyle = 'black';
// 四角形を描画するメソッドfillRect()
ctx.fillRect(15, 10, 150, 100);
参考
Canvas API - Web API | MDN
CanvasRenderingContext2D - Web API | MDN
getContext() メソッド(キャンヴァス操作に必要な"文脈オブジェクト"を与える) - 要素リファレンス
Canvas.getContext() - キャンパスに描画するコンテキストを取得
HTML5 canvas.getContext("2d") リファレンス
Canvasの使い方－Canvasリファレンス
Author And Source
この問題について(canvasのgetContext("2d")って何), 我々は、より多くの情報をここで見つけました https://qiita.com/manten120/items/86c087b937708697acec著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .