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