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

稿源：互联网 2018-09-02 22:35:16 点击： 19575 撤稿纠错

canvas来画圆圈的动画效果特效，很炫哦。。。

以下讨论的是和canvas 画圆动画相关的通用canvas代码实现的JS画圆圈动画特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<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>

关于通用canvas代码实现的JS画圆圈动画特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090293817.shtml方便下次再访问哦。

·上一篇： 一款通过jQuery实现的表格列表展开及收缩折叠特效代码
·下一篇： jquery实现的4屏切换焦点图动态显示大图js特效代码

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

文章分类LIST >>返回首页

最新游戏

最新新闻