ポイント
サンプル
これは、canvasタグを使ってつくりました。 実装の内容は、画面をクリックしたら図形がでてくると言う仕様です。
- html
<canvas id="canvas" width="640" height="480"></canvas>
#canvas { border: 1px solid black; }
- javascriptt
var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d'); const drowRectangle = () => { context.fillStyle = 'rgb(200, 0, 0)' context.fillRect(10, 10, 50, 50) } // クリックしたら canvas.addEventListener('mousedown', drowRectangle,false)
コンテキストオブジェクトを取得するする
このタグが持っている要素らしく、このオブジェクトを操作する事により、 図形などを作成できる様子
var context = canvas.getContext('2d');
contextオブジェクトを取得すると下記のメソッドが利用できる様になる
fillStyle // cssを fillRect // 正方形操作
参考記事
MDN チュートリアル