Trip to Canvas(2 - 图片处理)

上一篇文章中简单的举了2个canvas的例子，这里对canvas的画图进一步学习。

IE8或以下不支持！

图片重叠阴影

var g = document.getElementById("canvas1").getContext("2d");
g.fillStyle = "#c80000";
g.fillRect(10, 10, 55, 50);
g.fillStyle = "rgba(0, 0, 200, 0.5)";
g.fillRect(30, 30, 55, 50);

Run

曲线

var g = document.getElementById("canvas2").getContext("2d");
g.shadowBlur = 30;
g.shadowBlur = 30;
g.fillStyle = "red";
g.beginPath();
g.moveTo(30, 30);
g.lineTo(150, 150);
g.bezierCurveTo(60, 70, 60, 70, 70, 150);
g.lineTo(30, 30);
g.fill();

Run

Image repeat

Repeat the images:

var g = document.getElementById("canvas4").getContext("2d");
var img = new Image();
img.onload = function() {
for (i = 0; i < 4; i++) {
for (j = 0; j < 3; j++) {
g.drawImage(img, j * 50, i * 38, 50, 38);
}
}
}
img.src = 'http://images.cnblogs.com/cnblogs_com/whoseyourlady/251987/r_repaste.jpg';

Run

Change the numbers in line6 and re-run

Image frame

The images used are as follows:





Add frame to images:

var g = document.getElementById("canvas3").getContext("2d");
g.shadowBlur = 30;
g.drawImage(document.getElementById('source'), 68, 21, 350, 125, 20, 20, 87, 104);
g.drawImage(document.getElementById('frame'), 0, 0);

Run

Change the third line to g.drawImage(document.getElementById('source'), 68, 21, 150, 125, 20, 20, 87, 104); and re-run

Change the other numbers and re-run