<!DOCTYPE html>  

  • <html>  
  • <head>  
  •     <title>旋转五角星</title>  
  •     <meta charset="utf-8">  
  • </head>  
  • <body>  
  • <canvas id="canvas" width="600" height="600"></canvas>  
  •     <script type="text/javascript">  
  •         var canvas = document.getElementById("canvas");  
  •         var context = canvas.getContext("2d");  
  •         //设置边框样式以及填充颜色  
  •         context.lineWidth = 1;  
  •         context.fillStyle = "red";  
  •         context.strokeStyle = "red";  
  •   
  •         /* @length: 边长，逐渐变大  
  •          * @offset: 偏移位置，逐渐变大  
  •          * @offsetX: 横轴额外偏移，根据角度计算  
  •          * @offsetY: 竖轴额外偏移，根据角度计算  
  •          * @degree: 旋转角度，每次变化18度  
  •          */   
  •         var length = 2,  
  •             offset = 8,  
  •             degree = 0;  
  •         var halfWidth = canvas.width / 2,  
  •             halfHeight = canvas.height / 2;  
  •         for (var num = 0; num < 60; num++) {  
  •             length *= 1.05;  
  •             offset *= 1.06;  
  •             offsetX = offset * Math.cos(degree / 180 * Math.PI);  
  •             offsetY = offset * Math.sin(degree / 180 * Math.PI)  
  •             degree -= 18;  
  •   
  •             context.beginPath();  
  •             //设置是个顶点的坐标，根据顶点制定路径  
  •             for (var i = 0; i < 5; i++) {  
  •                 context.lineTo(Math.cos((degree + i*  72) / 180 * Math.PI) * length + offsetX + halfWidth,  
  •                                 -Math.sin((degree + i * 72) / 180 * Math.PI) * length + offsetY + halfHeight);  
  •                 context.lineTo(Math.cos((degree + 36 + i * 72) / 180 * Math.PI) * length * 0.4 + offsetX  + halfWidth,  
  •                                 -Math.sin((degree + 36 + i * 72) / 180 * Math.PI) * length * 0.4 + offsetY + halfHeight);  
  •             }  
  •             context.closePath();  
  •             context.fill();  
  •             context.stroke();  
  •         }  
  •     </script>  
  • </body>  
  • </html>  

转自blog.csdn.net/sysuzjz