基本
<canvas id="hoge" width="" height=""></canvas>
以降JSから操作する。
タグ内に置いた要素は代替コンテンツとなる
描画
キャンパスは二次元とする。
var context = canvas.getContext('2d');
以降contextを操作することで描画する
図形の描画
次の処理に使う線や塗りの色を指定する。
context.fillStyle = "color"; // 塗り
context.strokeStyle = "color"; // 枠線
長方形
長方形のみ関数が用意されている。
xとyは図形の左上の頂点がある座標を示す。
context.fillRect(x, y, width, height); // 塗りのみ
context.strokeRect(x, y, width, height); // 枠線のみ
パスを作成することで様々な図形の描画ができる。
# パスの作成
context.beginPath(); // 新しいパスを作成（既存のサブパスのリストを消去）
context.moveTo(x, y); // 最初のサブパスを作成
beginPath()を使わない場合、ひとつ前に描画したパスを引き継いでしまう。そのため特に理由がないなら空にする。
moveTo()は二点間を移動しているような名前だが、実際にはサブパスを追加する操作だと思う(addSubPath()でよくね？)
サブパスを追加しつつ、ひとつ前のサブパスとの間を描画する関数もある。
context.lineTo(x, y); // 直線
最後に、追加したサブパスを使って図形を描画する。
この際、描画される線はlineTo()で追加したサブパスのもののみとなる点に注意。
context.closePath(); // 最初と最後のサブパスをつなぐ
context.fill(); // 塗りのみ
context.stroke(); // 枠線のみ
closePath()をしないと、最初と最後のサブパスの間の辺が描画されないので注意。
fill()のときは自動で閉じられる。
描画の消去もできる。
content.clearRect(x, y, width, height) // 指定領域の削除
円・円弧
arc(x, y, radius, startAngle, endAngle, counterclockwise);
startAngle、endAngleはそれぞれ開始・終了地点の角度を示す。ラジアンで示す点に注意。
ラジアンで示す際は、整数ではなくMath.PI * radianで表す。
たとえば円なら0, Math.PI * 2となる。
counterclockwiseは反時計回りで描画するかどうかを決定する。falseを与えると時計回りになる。
余談だが、arcTo()という関数もある。
CanvasRenderingContext2D.arcTo()
context.arcTo(x1, y1, x2, y2, radius);
こちらは少し扱いが難しいが、引数で指定した二点の線分、サブパスとx2, y2が示す点をつなぐ線分の二つの線分の間で作用する関数。
CSSのborder-radiusみたいなかんじ。
以下に示すベジェや二字曲線も同じ感覚で扱う。
ベジェ・二字曲線
詳しくはここ。（丸投げ）
context.quadraticCurveTo(cp1x, cp1y, x, y); // 制御点1つ
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); // 制御点2つ
パスの記録
ここまではcontextに対して直接描画していたが、Path2Dオブジェクトに描画したものを描画する事ができる。これにより、パスの記録と再利用ができる。
let hoge = Path2D(); // Path2Dオブジェクトの作成
hoge = rect(10, 10, 50, 50); // パスを設定
context.stroke(hoge); // 描画