⊗jsSpCnvInr 261 of 294 menu

JavaScriptでのCanvasの基本操作

キャンバスは、ブラウザ上でJavaScriptを使って描画を行うための特別な領域です。 この領域は<canvas>タグを使用して作成され、 幅と高さを指定する必要があります:

<canvas width="200" height="200"></canvas>

JavaScriptでこの領域を操作するには、まずこのタグへの参照を 何らかの変数に取得します:

let canvas = document.querySelector('canvas');

次に、この変数に対してgetContextメソッドを 適用する必要があります:

let canvas = document.querySelector('canvas'); let ctx = canvas.getContext('2d');

簡略化することもできます:

let ctx = document.querySelector('canvas').getContext('2d');

結果として、変数ctxには、いわゆる 実行コンテキストを含むオブジェクトが 格納されます。すべての描画はこのオブジェクトの メソッドを使用して行われます。 そのメソッドの学習が今後のレッスンのテーマとなります。

日本語
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItalianoქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
当サイトでは、サイトの動作、分析、パーソナライゼーションのためにクッキーを使用しています。 データ処理はプライバシーポリシーに従って行われます。
すべて受け入れる 設定 拒否