canvasで図形を描画するメソッドやプロパティなどのメモ

準備

HTML

<canvas id="canvas" width=400 height=200>
  Canvas not supported.
</canvas>

JS

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext("2d");

メソッドやプロパティなど

直線を描く

JS

// 線(直線や曲線)を描き始める前の準備
// 線に関する座標の情報をPathという。
// Pathをリセットする
ctx.beginPath();

// 線を描き始める座標を指定する
ctx.moveTo(x, y);

// 直線を描き終わる座標を指定する
ctx.lineTo(x, y);

// 続けて2本目の直線を書き終わる座標を指定することもできる
// 今回は書きはじめの座標は1本目と共通
ctx.lineTo(x2, y2);

// 線の色
ctx.strokeStyle = 'orange';

// 先の太さ
ctx.lineWidth = 6;

// 上記メソッド・プロパティに基づいて線を描く
ctx.stroke();

円弧を描く

ラジアンはMath.Pi / 180 * 角度などで指定

JS

ctx.beginPath();

ctx.arc(中心x, 中心y, 半径, 描き始めのラジアン, 描き終わりのラジアン );

this.ctx.stroke();

四角形を描く

JS

// 塗りつぶす色
ctx.fillStyle = 'red';
// 四角形を描く
ctx.fillRect(四角形左上のx座標, 四角形左上のy座標, 幅, 高さ);

その他

JS

原点を移動する
ctx.translate(x, y);

原点を中心に回転する
ctx.rotate(Math.PI / 180 * 角度);

JS

// メソッドやプロパティで設定した座標や
// 線の色・太さなどを記憶する
ctx.save();

// 記憶したものを呼び出す
ctx.restore();

JS

// <canvas>要素の幅や高さを取得する
const width = canvas.widht;
const height = canvas.height;

JS

// ブラウザが<canvas>に対応しているか
// 対応していなければreturnで終了。
// returnは関数内でしか使えないので即時関数で囲むなどする必要がある。

const canvas = document.querySelector('canvas');
if (typeof canvas.getContext === 'undefined') {
  return;
}