HTML5 中用CANVAS画一个五角星

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

<script type="text/javascript">

function init() {
  var ctx = document.getElementById('stars').getContext('2d');
  ctx.fillStyle = "#827839";
  ctx.shadowColor="#000000";
  ctx.shadowOffsetX=6;
  ctx.shadowOffsetY=6;
  ctx.shadowBlur=9;
  ctx.beginPath();
  ctx.moveTo(15, 150);
  ctx.lineTo(100,140);
  ctx.lineTo(170,90);
  ctx.lineTo(230,140);
  ctx.lineTo(315,150);
  ctx.lineTo(230,200);
  ctx.lineTo(300,263);
  ctx.lineTo(170,233);
  ctx.lineTo(30,263);
  ctx.lineTo(100,200);
  ctx.closePath();
  ctx.fill();
}

window.addEventListener('load', init, false);

</script>
<canvas id="stars" width="333" height="300">
Your browser does not support the canvas element .
</canvas>

评论

2 楼 qmzmxfy 2011-11-18  

html5很神奇地说

1 楼 gdwenjun 2011-11-17