HTML5 6

Canvas

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

パスによるクリップ

パスを描いて、clip()メソッドを使用すると画像をクリップできます。

<canvas id="canvas1" width=300 height=300></canvas>
<canvas id="canvas2" width=300 height=300></canvas>
<script>
var canvas1 = document.getElementById("canvas1");
var context1 = canvas1.getContext("2d");
var canvas2 = document.getElementById("canvas2");
var context2 = canvas2.getContext("2d");

context2.beginPath();
context2.arc(150, 150, 100, 0, 2*Math.PI, true);
context2.clip();

var image = new Image();
image.onload = function() {
	context1.drawImage(image, 0, 0, canvas1.width, canvas1.height);
	context2.drawImage(image, 0, 0, canvas2.width, canvas2.height);
};
image.src = "neko.png";
</script>

グラデーション

createLinearGradient(x1, y1, x2, y2)
線形グラデーション
(x1, y1)から、(x2, y2)まで直線的に色が変化します。
createRadialGradient(x1, y1, r1, x2, y2, r2)
円形グラデーション
(x1, y1)を中心とする半径r1の円から、 (x2, y2)を中心とする半径r2の円まで色が変化します。
addColorStop(offset, color)
グラデーションの境界色の指定。
offsetは0.0から1.0までの値で、0.0がグラデーションの始まり、1.0がグラデーションの終わりを表します。
colorは、境界の色をCSSカラーで表します。
<canvas id="canvas3" width=200 height=200></canvas>
<script>
var canvas3 = document.getElementById("canvas3");
var context3 = canvas3.getContext("2d");

var gra = context3.createLinearGradient(0, 0, 200, 0);
gra.addColorStop(0.0, "rgb(255, 255, 255)");
gra.addColorStop(1.0, "rgb(0, 0, 0)");
context3.fillStyle = gra;
context3.fillRect(0, 0, 200, 200);
</script>
<canvas id="canvas4" width=200 height=200></canvas>
<script>
var canvas4 = document.getElementById("canvas4");
var context4 = canvas4.getContext("2d");

var gra2 = context4.createRadialGradient(90, 90, 0, 50, 50, 200);
gra2.addColorStop(0.0, "rgb(255, 255, 255)");
gra2.addColorStop(1.0, "rgb(0, 0, 0)");
context4.fillStyle = gra2;
context4.arc(100, 100, 50, 0, 2*Math.PI, true);
context4.fill();
</script>

パターン

画像を縦・横に並べるにはcreatePattern()メソッドを使用します。

createPattern(image, pattern)
画像imageをpatternの指示に従って並べます。
patternは、以下のどれかです。
"repeat"
縦・横に並べます。
"repeat-x"
横に並べます。
"repeat-y"
縦に並べます。
"no-repeat"
繰り返し無し。
空文字、null
"repeat"と同じ。

以下は、画像を並べるスクリプトです。

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

var image2 = new Image();
image2.onload = function() {
	var pat = context5.createPattern(image2, "repeat");
	context5.fillStyle = pat;
	context5.fillRect(0, 0, 200, 200);
};
image2.src = "neko2.png";
</script>

座標変換

translate(x, y)
現在の座標を(x, y)移動
rotate(r)
現在の座標をrラジアン回転
scale(sx, sy)
現在の座標を(sx, sy)スケール
<canvas id="canvas6" width=200 height=200></canvas>
<script>
var canvas6 = document.getElementById("canvas6");
var context6 = canvas6.getContext("2d");

context6.fillStyle = "rgb(255, 0, 0)";
context6.fillRect(0, 0, 50, 50);

context6.translate(50, 50);
context6.rotate(Math.PI/4.0);
context6.fillStyle = "rgb(0, 255, 0)";
context6.fillRect(0, 0, 50, 50);

context6.translate(50, 50);
context6.rotate(-Math.PI/4.0);
context6.scale(0.5, 0.5);
context6.fillStyle = "rgb(0, 0, 255)";
context6.fillRect(0, 0, 50, 50);
</script>

コンテキスト保存

save()、restore()メソッドによって、以下のコンテキストをスタックに保存・復帰できます。

save()
コンテキストをスタックの最後に保存
restore()
スタックの最後に保存されたコンテキストの復帰
<canvas id="canvas7" width=200 height=200></canvas>
<script>
var canvas7 = document.getElementById("canvas7");
var context7 = canvas7.getContext("2d");

context7.fillStyle = "rgb(255, 0, 0)";
context7.fillRect(0, 0, 50, 50);

context7.save();

context7.translate(50, 50);
context7.rotate(Math.PI/4.0);
context7.fillStyle = "rgb(0, 255, 0)";
context7.fillRect(0, 0, 50, 50);

context7.restore();

context7.fillRect(100, 100, 50, 50);
</script>

ピクセル操作

Canvasのピクセル操作に関するメソッドは、以下の通りです。

createImageData(width, height)
createImageData(imagedata)
width X heightの大きさ、またはimagedataと同じ大きさのImageDataオブジェクトを返します。
返されたImageDataオブジェクトのピクセル色は黒です。
getImageData(x, y, width, height)
コンテキストの(x, y)からwidth X heightの大きさのImageDataオブジェクトを返します。
putImageData(imagedata, x, y [, dx, dy, width, height])
コンテキストの(x, y)の位置にimagedataを描画します。
第4引数以下が存在する場合は、imagedataの(dx, dy)の位置からwidth X heightの部分だけ描画します。

ImageDataオブジェクトのプロパティには、以下のものがあります。

width
データの横幅(ピクセル)
height
データの縦幅(ピクセル)
data
ピクセルデータの1次元配列
<canvas id="canvas8" width=300 height=300></canvas>
<script>
var canvas8 = document.getElementById("canvas8");
var context8 = canvas8.getContext("2d");

var image3 = new Image();
image3.onload = function() {
	context8.drawImage(image3, 0, 0, canvas8.width, canvas8.height);
	for(var y = 0; y < canvas8.height/2; y++) {
		for(var x = 0; x < canvas8.width/2; x++) {
			var pixel = context8.getImageData(x, y, 1, 1).data;
			var r = pixel[0];
			var g = pixel[1];
			var b = pixel[2];
			var h = (r + g + b)/3.0;
			var pix = context8.createImageData(1, 1);
			pix.data[0] = h;
			pix.data[1] = h;
			pix.data[2] = h;
			pix.data[3] = 255;
			context8.putImageData(pix, x, y);
		}
	}
};
image3.src = "neko.png";
</script>

CanvasをURLで保存

CanvasのtoDataURL()メソッドで、Canvasを画像データとして保存したり、サーバに転送することができます。

toDataURL(type)
CanvasをURLに変換します。
変換されたデータは文字列です。
typeは以下のどれかです。
"image/png"
PNG画像として、データを作成します。
"image/jpeg"
JPEG画像として、データを作成します。
この場合は、第2引数に0.0〜1.0の数値を与えると画像の品質を表します。
typeが省略されると、"image/png"になります。
<canvas id="canvas9" width=200 height=200></canvas>
<br>
<button onclick="saveData()">保存</button>
<script>
var canvas9 = document.getElementById("canvas9");
var context9 = canvas9.getContext("2d");

context9.fillStyle = "rgb(255, 0, 0)";
context9.fillRect(0, 0, 50, 50);
context9.fillStyle = "rgb(0, 255, 0)";
context9.fillRect(50, 50, 50, 50);
context9.fillStyle = "rgb(0, 0, 255)";
context9.fillRect(100, 100, 50, 50);

function saveData() {
	var data = canvas9.toDataURL("image/png");
	data = data.replace("image/png", "image/octet-stream");
	window.open(data, "save");
}
</script>

参考

HTML5のcanvasで作られたゲーム


Prev
index | home
abetmhr@gmail.com