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>
原文：http://www.cnblogs.com/--silence/p/4999073.html