使用canvas画布—绘制螺旋图 

 1 <!doctype html>
 2 <html>
 3  <head>
 4   <meta charset="UTF-8">
 5   <title>在画布中绘制图像--螺旋图</title>
 6 
 7  </head>
 8  <body>
 9   <canvas id="canvas" width="400" height="400" style="border:1px solid black" ></canvas>
10   <input type="button" id="btn" value="开始">
11 
12   <script>
13     var btn=document.getElementById("btn");
14     var canvas=document.getElementById("canvas");
15     var context=canvas.getContext('2d');
16     
17      btn.onclick=function(){
18         context.translate(150,50);        
19         context.scale(0.95,0.95);
20 
21         context.fillStyle="blue";
22         context.globalAlpha=0.5;
23         context.fillRect(0,0,100,50);
24 
25         for(var i=1;i<=80;i++){
26             context.translate(15,15);
27             context.scale(0.95,0.95);
28             context.rotate(Math.PI/20);    
29             context.fillRect(0,0,100,50);
30         }
31      }
32 
33     </script>
34  </body>
35 </html>

posted @ 2015-11-26 21:50  silence灬  阅读(1339)  评论(0)    收藏  举报