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

主页 M

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

2016-07-27 网页编程网 网页编程网

<html><body>
 <canvas id="myCanvas" width="1200"  height="300" style="border:1px solid #333;">
     您的浏览器不支持canvas！
 </canvas>
 <button onclick="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></html>

阅读原文

阅读 5709

123 显示电脑版