使用canvas畫布—繪製螺旋圖

時間 2019-11-19

標籤使用 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>

相關標籤/搜索