学步园

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

IE8或以下不支持！ 

 

图片重叠阴影

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

曲线

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

Image repeat

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

• Change the numbers in line6 and re-run

Image frame

The images used are as follows:

Add frame to images:
<br /> var g = document.getElementById("canvas3").getContext("2d");<br /> g.shadowBlur = 30;<br /> g.drawImage(document.getElementById('source'), 68, 21, 350, 125, 20, 20, 87, 104);<br /> g.drawImage(document.getElementById('frame'), 0, 0);<br />
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