歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

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(15150);   
  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>  
Copyright © Linux教程網 All Rights Reserved