canvas 基本的な使い方 様々な描画方法

今回から「canvas」の使い方について見ていきましょう。

「canvas」はHTMLのタグですが、実装するには、JavaScriptが必要になります。

まずは基本的な描画の仕方について見ていきましょう。

canvas

<canvas>

widthとheight属性は省略出来ますが、その場合デフォルトでは幅300px、高さ150pxになります。

getContext()

このままHTMLに記述してもキャンパスは空のままなので、JavaScriptで「getContext()」メソッドを使用する必要があります。

const canvas = document.getElementById('sample');
const cont = canvas.getContext('2d');

getContext()メソッドは、引数として以下のパラメーターを持つことが出来ます。

• 2d：2次元グラフィックスを描画するための「CanvasRenderingContext2D」を取得します。
• webgl：3次元グラフィックスを描画するための「WebGLRenderingContext」を取得します。
• webgl2：3次元グラフィックスを描画するための「WebGL2RenderingContext」を取得します。bitmaprenderer：キャンパスのコンテンツを「ImageBitmapRenderingContext」を取得することにより、画像を置き換えることが出来ます。

詳しくは以下、MDNのサイトをご参照ください。

MDN：HTMLCanvasElement.getContext（）

以下のプロパティを指定することで、描画することが出来ます。

	プロパティ	意味
矩形	clearRect(x,y,width,height)	透明色で塗りつぶします
	fillRec(x,y,width,height)	塗りつぶします
	strokeRect(x,y,width,height)	輪郭を描画します
文字列	fillText()	テキストの内部を塗りつぶします
	strokeText()	テキストの輪郭を塗りつぶします
	measureText()	テキストの情報を返します
線	lineWidth	線の太さを指定します
	lineCap	線の端のスタイルを設定します
	lineJoin	2つの線が交わる場所の形状を指定します
	getLineDash()	破線のパターンを取得します
	setLineDash()	破線のパターンを指定します
	lineDashOffset	破線の開始点を指定します
文字列	font	フォントを設定します
	textAlign	テキストの揃え方を指定します
	textBaseline	ベースラインの揃え方を指定します
	direction	テキストの方向を指定します
塗りつぶし	fillStyle	図形の内側を塗りつぶす色やパターンを指定します
ストロークスタイル	strokeStyle	図形の輪郭に使用する色やパターンを指定します
グラデーション	createLinerGradient()	座標から線形グラデーションを作成します
	createRadialGradient()	座標から放射状のグラデーションを作成します
パスの作成	beginPath()	新しいパスを作成します
	closePath()	現在地点からサブパスの開始点まで 直線を追加します
	stroke()	輪郭をなぞります
	fill()	パスの内部領域を塗りつぶします
	moveTo()	新しいパスの開始地点を指定します
	lineTo()	新しいパスの終了地点を指定します

詳しい情報、その他のプロパティは上記のMDNのサイトでご確認ください。

矩形

<canvas id="sample"></canvas>

const canvas = document.getElementById('sample');
const cont = canvas.getContext('2d');

cont.fillStyle = 'rgb(200, 0, 0)';
cont.fillRect(10, 10, 100, 100);

cont.fillStyle = 'rgba(65, 105, 225, 0.7)';
cont.fillRect(30, 30, 100, 100);

const canvas1 = document.getElementById('sample1');
const cont1 = canvas1.getContext('2d');

cont1.fillStyle = 'rgb(200, 0, 0)';
cont1.fillRect(25, 25, 100, 100);
cont1.clearRect(45, 45, 60, 60);
cont1.strokeRect(55, 55, 40, 40);

パス

const canvas2 = document.getElementById('sample2');
const cont2 = canvas2.getContext('2d');

cont2.beginPath();
cont2.moveTo(20, 140);
cont2.lineTo(120, 10);
cont2.lineTo(220, 140);
cont2.closePath();
cont2.stroke();

「moveTo()」で最初の地点を指定して、「lineTo()」で次の地点を指定していきます。

ここでは、「lineTo(120,20)」で上の点、「lineTo(220,140)」で右下の点を指定しています。

「closePath()」で最初の点と最後の点を結んでいます。

「stroke()」で線の輪郭をなぞっています。

• moveTo()：ペンを移動する
• lineTo()：直線を描く

const canvas3 = document.getElementById('sample3');
const cont3 = canvas3.getContext('2d');

cont3.beginPath();
cont3.moveTo(100, 50);
cont3.lineTo(75, 25);
cont3.lineTo(75, 75);
cont3.closePath();
cont3.stroke();
cont3.fillStyle = 'green';
cont3.fill();

「fillStyle」と「fill()」を使って描画を塗りつぶしています。

const canvas4 = document.getElementById('sample4');
const cont4 = canvas4.getContext('2d');

cont4.beginPath();
cont4.moveTo(25, 25);
cont4.lineTo(75, 25);
cont4.lineTo(25, 75);
cont4.closePath();
cont4.fillStyle = 'green';
cont4.fill();

cont4.beginPath();
cont4.moveTo(80, 80);
cont4.lineTo(80, 30);
cont4.lineTo(30, 80);
cont4.closePath();
cont4.stroke();

2つの三角形を描いています。

一つは塗りつぶし、もう一つは輪郭線のみ描いています。

円

円弧や円を描くには以下のメソッドを使用します。

• arc()
• arcTo()

「x、y」で円弧の中心位置、「radius」で半径、「startAngle」で円弧の開始角度、「endAngle」で円弧の終わりの角度、「counterclockwise」で方向を記述します。

const canvas6 = document.getElementById('sample6');
const cont6 = canvas6.getContext('2d');

for (let i = 0; i <= 3; i++) {
  for (let r = 0; r <= 2; r++) {
    cont6.beginPath();
    let x = 30 + r * 50;
    let y = 30 + i * 50;
    let radius = 20;
    let startAngle = 0;
    let endAngle = Math.PI + (Math.PI * r) / 2; //90度ずつ増加
    let counterclockwise = i % 2 === 1; //trueの場合は反時計回り

    cont6.arc(x, y, radius, startAngle, endAngle, counterclockwise);

    if (i > 1) {
      cont6.fillStyle = 'green';
      cont6.fill();
    } else {
      cont6.stroke();
    }
  }
}

ベジェ曲線

cpx ：コントロールポイントの座標
x,y：終点の座標

const canvas7 = document.getElementById('sample7');
const cont7 = canvas7.getContext('2d');

cont7.beginPath();
cont7.moveTo(50, 20); //開始点
cont7.quadraticCurveTo(230, 30, 50, 100); //コントロールポイントと終点の座標
cont7.stroke();// 輪郭

cont7.beginPath();
cont7.arc(50, 20, 5, 0, 2 * Math.PI); // 開始点に丸
cont7.arc(50, 100, 5, 0, 2 * Math.PI); // 終点に丸
cont7.fillStyle = 'green';
cont7.fill();

cont7.beginPath();
cont7.arc(230, 30, 5, 0, 2 * Math.PI); //コントロールポイント
cont7.fillStyle = 'red';
cont7.fill();

const canvas8 = document.getElementById('sample8');
const cont8 = canvas8.getContext('2d');

cont8.beginPath();
cont8.moveTo(20, 150); // 開始点
cont8.quadraticCurveTo(150, 150, 250, 20); //コントロールポイントと終点
cont8.stroke(); //輪郭

ベジェ曲線はやや難解です。

慣れるまでに時間を要する場合があります。

上の2つは2時曲線になりますが、3次曲線を描くことも出来ます。

コントロールポイントを2箇所指定します。

const canvas9 = document.getElementById('sample9');
const cont9 = canvas9.getContext('2d');

cont9.beginPath();
cont9.moveTo(20, 20);
cont9.bezierCurveTo(230, 30, 150, 80, 250, 100);
cont9.stroke();

cont9.beginPath();
cont9.arc(230, 30, 5, 0, 2 * Math.PI); //コントロールポイント
cont9.arc(150, 80, 5, 0, 2 * Math.PI); //コントロールポイント
cont9.fillStyle = 'red';
cont9.fill();

Path2D

const canvas10 = document.getElementById('sample10');
const cont10 = canvas10.getContext('2d');

let path1 = new Path2D();
path1.rect(10, 10, 150, 150);

let path2 = new Path2D();
path2.arc(250, 80, 70, 0, 2 * Math.PI);

cont10.stroke(path1);
cont10.fill(path2);

Path2Dオブジェクトを使用すると、コードをシンプルに記述することが出来ます。

あとがき

図形は慣れるまでに時間を要しますので、焦らず時間をかけて学習していくようにしましょう。

なお、ここでご紹介させて頂いている内容は、MDNのサイトを参考にしています。

詳しい解説はMDNのサイトをご参照ください。

MDN：図形の描画

今回も最後までお読み頂きありがとうございました。