canvas について

ポイント

• canvasタグはcontextオブジェクトを持っていてそれらを操作する
• イベント
• canvasのオブジェクトを操作するメソッドを覚える

サンプル

これは、canvasタグを使ってつくりました。 実装の内容は、画面をクリックしたら図形がでてくると言う仕様です。

• html

  <canvas id="canvas" width="640" height="480"></canvas>

• css

#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  // 正方形操作

参考記事

qiita.com

MDN チュートリアル

developer.mozilla.org