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)
createRadialGradient(x1, y1, r1, x2, y2, r2)
addColorStop(offset, color)
<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)
以下は、画像を並べるスクリプトです。
<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)
rotate(r)
scale(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)
getImageData(x, y, width, height)
putImageData(imagedata, x, y [, dx, dy, width, height])
ImageDataオブジェクトのプロパティには、以下のものがあります。
<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のtoDataURL()メソッドで、Canvasを画像データとして保存したり、サーバに転送することができます。
toDataURL(type)
<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で作られたゲーム