Canvasを使ってみる

HTMLで使える図形描画APIのCanvasを使ってみる

Hiropon
Canvas

Canvas使用準備

MDNの説明を参考に canvasの使い方を見る

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

ページに描画を表示させるためのcanvasタグを入れる。 canvasタグのwidth,height属性でこのcanvasが縦横それぞれ何ピクセルなのか指定する。 cssでサイズを変更した場合、最初に確保したサイズは変わらず、 それを拡大、縮小した形で表示される。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d", {alpha: false});

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);

文書内のcanvas要素を指定してgetContextで描画コンテキストを取得。 MDNに背景透過をオフにした方がパフォーマンスが上がると書かれているので{alpha: false}を指定。 fillStyleで矩形の塗りを指定してfillRectで指定した位置に矩形を表示。

矩形描画

void ctx.fillRect(x, y, width, height);
void ctx.strokeRect(x, y, width, height);
void ctx.clearRect(x, y, width, height);

ctxはCanvasRenderingContext2Dのインスタンス。 fillRectは矩形の塗りつぶし、stokeRectは線描画、clearRectは矩形内の描画の消去。

ctx.fillStyle = 'green';
ctx.fillRect(10,10,300,200);
ctx.strokeStyle = 'blue';
ctx.lineJoin = 'bevel';
ctx.lineWidth = 5;
ctx.strokeRect(50,100,300,200);
ctx.clearRect(100,50,150,150);

strokeStyleで線の塗りを指定。lineJoinで線の角の描き方を指定。 lineWidthで線の太さを指定。

円弧描画

arc(x, y, radius, startAngle, endAngle, counterclockwise)

x, yを中心とした半径radiusの円弧をstartAngleの角度からendAngleの角度まで、 counterclockwiseで指定される方向に向かって描く。

角度はX軸の正の方向から時計回りに、ラジアン角で指定。 また、counterclockwiseの初期値はfalse。

ctx.strokeStyle="white";
ctx.lineWidth=10;
ctx.arc(100,100,50,0,Math.PI*2,true);
ctx.stroke();
    
ctx.beginPath();
ctx.arc(300,100,50,0,Math.PI*2,true);
ctx.fillStyle="green"
ctx.fill();

ctx.beginPath()でパスをリセットしている。 これが無いと二つのarcで作ったパスが一つのパスとして扱われるため、 最後のfill()で両方の円が塗りつぶされる。