HTML5 中用CANVAS画一个五角星

HTML5 中用CANVAS画一个五角星

HTML5 中用CANVAS画一个五角星,代码如下:

1. <script type="text/javascript">   
2.   
3. function init() {   
4.   var ctx = document.getElementById('stars').getContext('2d');   
5.   ctx.fillStyle = "#827839";   
6.   ctx.shadowColor="#000000";   
7.   ctx.shadowOffsetX=6;   
8.   ctx.shadowOffsetY=6;   
9.   ctx.shadowBlur=9;   
10.   ctx.beginPath();   
11.   ctx.moveTo(15, 150);   
12.   ctx.lineTo(100,140);   
13.   ctx.lineTo(170,90);   
14.   ctx.lineTo(230,140);   
15.   ctx.lineTo(315,150);   
16.   ctx.lineTo(230,200);   
17.   ctx.lineTo(300,263);   
18.   ctx.lineTo(170,233);   
19.   ctx.lineTo(30,263);   
20.   ctx.lineTo(100,200);   
21.   ctx.closePath();   
22.   ctx.fill();   
23. }   
24.   
25. window.addEventListener('load', init, false);   
26.   
27. </script>   
28. <canvas id="stars" width="333" height="300">   
29. Your browser does not support the canvas element .   
30. </canvas>