HTML5 中用CANVAS畫一個五角星

HTML5 中用CANVAS畫一個五角星,代碼如下:

1. <script type="text/javascript">
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. }
25. window.addEventListener('load', init, false);
27. </script>
28. <canvas id="stars" width="333" height="300">
29. Your browser does not support the canvas element .
30. </canvas>