HTML5 5

Canvas

Canvasの様々な機能を紹介します。

パスによる描画

パスによって、直線・曲線を描くことができます。

beginPath()
パスを初期化します。
strokeStyle
線の色やスタイルを指定するプロパティです。
moveTo(x, y)
描画の始点を(x, y)に移動します。
lineTo(x, y)
始点から(x, y)まで直線を描画します。
arc(x, y, rad, sa, ea, ak);
(x, y)を中心点にして、半径radの円を描画します。
X軸の時計回りにsa度からea度までの範囲に、 akがtrueなら反時計回り、akがfalseなら時計回りに描画します。
quadraticCurveTo(cpx, cpy, x, y)
二次ベジェ曲線を描画します。　
cpx, cpy
制御点のx, y座標
x, y
終点のx, y座標
bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y)
三次ベジェ曲線を描画します。　
cpx1, cpy1
一番目の制御点のx, y座標
cpx2, cpy2
二番目の制御点のx, y座標
x, y
終点のx, y座標
arcTo(x1, y1, x2, y2, r)
始点から(x1, y1)まで直線を描画し、(x2, y2)に向かって半径rの円弧を描画します。
stroke()
パスに従って、実際に描画します。 
<canvas id = "canvas1" width = 300 height = 300></canvas>
<script>
var canvas1 = document.getElementById("canvas1");
var context1 = canvas1.getContext("2d");

context1.beginPath();
context1.moveTo(0, 0);
context1.lineTo(100, 100);
context1.stroke();

context1.strokeStyle = "rgb(0, 255, 255)";
context1.beginPath();
context1.arc(150, 50, 30, 0, Math.PI*2, false);
context1.stroke();

context1.strokeStyle = "rgb(255, 0, 0)";
context1.beginPath();
context1.moveTo(0, 100);
context1.quadraticCurveTo(50, 200, 100, 100);
context1.stroke();

context1.strokeStyle = "rgb(0, 255, 0)";
context1.beginPath();
context1.moveTo(0, 200);
context1.bezierCurveTo(0, 300, 100, 200, 100, 300);
context1.stroke();

context1.strokeStyle = "rgb(0, 0, 255)";
context1.beginPath();
context1.moveTo(100, 100);
context1.arcTo(160, 130, 100, 160, 10);
context1.stroke();
</script>

図形がパス内にあるかどうか

ある図形がパスの中にあるかどうかは、コンテキストのisPointInPathメソッドで調べることができます。 

<canvas id = "canvas20" width = 300 height = 300></canvas>
<script>
var canvas20 = document.getElementById("canvas20");
var context20 = canvas20.getContext("2d");

context20.beginPath();
context20.arc(100, 100, 60, 0, Math.PI*2, false);
context20.stroke();

for(var i = 0; i < 20; i++) {
	if(context20.isPointInPath(10*i, 10*i))
		context20.fillStyle = "rgb(255, 0, 0)";
	else
		context20.fillStyle = "rgb(0, 0, 255)";
	context20.fillRect(10*i, 10*i, 10, 10);
}
</script>

影のつけ方

影は、コンテキストの以下のプロパティでつけることができます。

shadowOffsetX
影の水平方向のオフセット値
shadowOffsetY
影の垂直方向のオフセット値
shadowColor
影の色
shadowBlur
影のぼかし幅 
<canvas id = "canvas2" width = 200 height = 200></canvas>
<script>
var canvas2 = document.getElementById("canvas2");
var context2 = canvas2.getContext("2d");

context2.shadowOffsetX = 7;
context2.shadowOffsetY = 7;
context2.shadowColor = "rgb(50, 50, 50)";
context2.shadowBlur = 7;
context2.fillStyle = "rgb(255, 0, 0)";
context2.fillRect(10, 10, 100, 100);
</script>

描画が重なったときの処理

図形が重なっている場合には、 コンテキストのglobalCompositeOperationプロパティに代入した指定に従って描画されます。 

<canvas id = "canvas3" width = 200 height = 200></canvas>
<script>
var canvas3 = document.getElementById("canvas3");
var context3 = canvas3.getContext("2d");

context3.fillStyle = "green";
context3.fillRect(10, 10, 100, 100);

context3.globalCompositeOperation = "source-over";

context3.beginPath();
context3.fillStyle = "blue";
context3.arc(100, 100, 60, 0, Math.PI*2, false);
context3.fill();

context3.globalCompositeOperation = "source-over";
context3.strokeStyle = "rgb(150, 150, 150)";
context3.strokeRect(10, 10, 100, 100);
context3.beginPath();
context3.arc(100, 100, 60, 0, Math.PI*2, false);
context3.stroke();
</script>

globalCompositeOperationの値は、以下の通りです。

参考 (他生徒作品)

Prev | Next
index | home
abetmhr@gmail.com