利用canvas实现的JS画圆圈特效代码

落日映苍穹つ 2022-07-13 02:53 172阅读 0赞

<body>  
  
  
 <canvas id="myCanvas" width="1200"  height="300" style="border:1px solid \#333;">  
     您的浏览器不支持canvas！  
 </canvas>  
 <button οnclick="actiondo()">圆</button>  
 <script>   
         var canvas = document.getElementById('myCanvas'),width = canvas.width,height = canvas.height,ctx = canvas.getContext('2d');    
         var step,startAngle,endAngle,add=Math.PI\*2/100;  
         ctx.shadowOffsetX = 0; // 设置水平位移  
         ctx.shadowOffsetY = 0; // 设置垂直位移  
         ctx.shadowBlur = 10; // 设置模糊度  
         ctx.lineWidth = 1.0;   
         counterClockwise = false;  
         var x;  
         var y;  
         var radius;  
         var animation\_interval = 20,n = 100;  
         var varName;  
  
  
         function actiondo()\{  
                 step=1;  
                 startAngle=0;  
                 ctx.strokeStyle ='\#'+('00000'+(Math.random()\*0x1000000<<0).toString(16)).slice(-6);//圆圈颜色                  
                 ctx.shadowColor = '\#'+('00000'+(Math.random()\*0x1000000<<0).toString(16)).slice(-6); // 设置阴影颜色  
                 //圆心位置  
                 x=Math.floor(Math.random()\*1000+100);  
                 y=Math.floor(Math.random()\*100+100);  
                 radius = Math.floor(Math.random()\*50+50);                  
                varName= setInterval(animation, animation\_interval);  
         \}  
 var animation = function () \{    
     if (step <= n) \{    
         endAngle = startAngle + add ;    
         drawArc(startAngle, endAngle);   
                 startAngle = endAngle;  
         step++;    
     \} else \{    
         clearInterval(varName);    
     \}    
           
 \};  
 function drawArc(s, e) \{    
     ctx.beginPath();     
     ctx.arc(x, y, radius, s, e, counterClockwise);    
         ctx.lineWidth = 1.0;          
         ctx.stroke();    
 \}    
 </script>  
 </body>