用canvas画环形圆形图片

效果如图自动绘制不停歇

代码如下

  var canvas = document.getElementById('myCanvas'),width = canvas.width,height = canvas.height;  
         var step,startAngle,endAngle,add=Math.PI*2/100;
         counterClockwise = false;
         var isDrawOver=true;
         var x1=Math.floor(200+100);//设置默认圆心X轴
         var y1=Math.floor(20+100);//设置默认圆心Y轴
         var x;var y;
         var radius1= Math.floor(10+50);//设置默认圆半径
         var radius;
         var animation_interval = 20,n = 100;
         var varName;
         function setCtxCanvas(){
              ctx = canvas.getContext('2d');
              ctx.shadowOffsetX = 0; // 设置水平位移
             ctx.shadowOffsetY = 0; // 设置垂直位移
              ctx.shadowBlur = 10; // 设置模糊度
             ctx.lineWidth = 1.0; 
         }
         function actiondo(){
             if(isDrawOver){
                 isDrawOver=false;
                  setCtxCanvas();
                 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); // 设置阴影颜色
                 //圆心位置
                 if(x==undefined&&y==undefined&&radius==undefined){
                     x=x1;
                    y=y1;
                    radius = radius1;     
                 }
                 else if(x1==x&&y1==y&&radius1==radius){
                     x=x1;
                    y=y1-radius1;
                    radius = radius1/2; 
                 }
                 else if(x==x1&&y<y1){
                     x=x1+radius1;
                    y=y1;
                    radius = radius1/2; 
                 }
                 else if(y==y1&&x>x1){
                     x=x1;
                    y=y1+radius1;
                    radius = radius1/2;
                 }
                 else if(x==x1&&y>y1){
                     x=x1-radius1;
                    y=y1;
                    radius = radius1/2; 
                 }
                 else if(x<x1&&y==y1){
                     x=x1;
                    y=y1;
                    radius = radius1; 
                 }
                // var htmldiv='<div>x='+x+',y='+y+',radius='+radius+',x1='+x1+',y1='+y1+',radius1='+radius1+'</div>';
              //   $('#ddd').append(htmldiv);       
                 varName= setInterval(animation, animation_interval);
                }
         }
 var animation = function () {  
     if (step <= n) {  
         endAngle = startAngle + add ;  
         drawArc(startAngle, endAngle); 
                 startAngle = endAngle;
         step++;  
     } else {  
         clearInterval(varName); 
         isDrawOver=true;
         actiondo();
     }  
         
 };
 function drawArc(s, e) {  
     ctx.beginPath();   
     ctx.arc(x, y, radius, s, e, counterClockwise);  
         ctx.lineWidth = 1.0;        
         ctx.stroke();  
 }  

代码如下直接运行

<canvas id="myCanvas"  width="1200"  height="300" style="border:0px solid #333;"></canvas>

html代码这句就行了。

转载于:https://www.cnblogs.com/gclearn/p/4658963.html