canvas画五角星
1 <html> 2 <head lang="en"> 3 <meta charset="UTF-8"> 4 <title>画五角星</title> 5 <script> 6 function draw(id){ 7 var canvas=document.getElementById(id); 8 if(canvas==null) 9 { 10 return false; 11 } 12 var context=canvas.getContext("2d"); 13 context.fillStyle="#eeeeef"; 14 context.fillRect(0,0,500,500); 15 context.shadowOffsetX=40; 16 context.shadowOffsetY=20; 17 context.shadowColor="rgba(100,100,100,0.5)"; 18 context.shadowBrul=1; 19 //context.translate(20,20); 20 for(var i=0;i<3;i++) 21 { 22 create5Star(context); 23 context.translate(100,100); 24 } 25 } 26 function create5Star(context) 27 { 28 var dx=100; 29 var dy=100; 30 var s=50; 31 context.beginPath(); 32 context.fillStyle="rgb(255,0,0)"; 33 context.strokeStyle="rgb(0,0,100)"; 34 var dig=Math.PI/5*4; 35 var x=Math.sin(0); 36 var y=Math.cos(0); 37 38 for(var i=0;i<5;i++) 39 { 40 var x=Math.sin(i*dig); 41 var y=Math.cos(i*dig); 42 context.lineTo(dx+x*s,dy+y*s); 43 } 44 context.closePath(); 45 context.fill(); 46 context.stroke(); 47 } 48 </script> 49 </head> 50 <body onLoad="draw('mycanvas')"> 51 <canvas id="mycanvas" width="500px" height="500px"></canvas> 52 </body> 53 </html>
效果如图：
