网页编程网

www.youkud.com

当前位置：主页 >> 网页特效 >> 正文

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

阅读：5299 输入：2016-07-27 08:40:47

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

上一篇：js比对两个数字大小
下一篇：php验证身份证号码正确性的函数

相关阅读: 纯css中video做背景的网站; css3实现3D翻转相册; css中\'+\'兄弟选择器及\'~\'选择器的代码

下载专区: 软件下载（提取码：mtag）

Tag

HTML工具: 进制间转换; 进制转换（带小数）; html代码运行

HTML工具: 字母翻转; 硬盘整数分区; html颜色代码

HTML工具: 除空格回车; 万年历; fojiao

HTML工具: 小游戏; 在线绘画; 更多

手机版
联系微信:jingqishens