canvas三环加载进度条

之前做了一个三个圆形叠加在一起的加载，用的是定位和cile来操作，但是加载的头部不能是圆形。后来用canvas做了一个，但是这个加载的进度不好调整，原理很简单，就是让一个圆，按照圆形轨迹进行运动就可以了，也不需要擦除运动轨迹，就像是进度加载一样。不多说，直接上代码：

结构很简单：一个canvas就搞定

<canvas id="c1" width="200" height="200">
　　<span>您的浏览器版本过低了，不支持canvas</span>
</canvas>

主要是样式，样式用的很简单，也很复杂，简单就是看的清楚，复杂是没有复用，代码写的过多了

gd.lineWidth=20;
var angle = 0.01;

function draw(){
//最内
gd.beginPath();
gd.fillStyle='red';
gd.strokeStyle="#5a7a7c";

gd.arc(100,100,50,d2a(0),d2a(360),false);
gd.stroke();

/*gd.beginPath();
gd.strokeStyle="#0ad5e2";
gd.arc(100,100,50,d2a(-90),d2a(-80),false);
gd.stroke();*/

setInterval(function(){
var x=100;
var y=100;
angle += 0.03;
var s = Math.sin(angle);
var c = -Math.cos(angle);
gd.beginPath();
gd.fillStyle="#0ad5e2";
gd.arc(x+(s*50),y+(c*50),10,0,2*Math.PI,false);
gd.fill();
},300)

//中间
gd.beginPath();
gd.strokeStyle="#d78f0b";
gd.arc(100,100,70,d2a(0),d2a(360),false);
gd.stroke();

/*gd.beginPath();
gd.strokeStyle="#ffff00";
gd.arc(100,100,70,d2a(-90),d2a(-80),false);
gd.stroke();*/
setInterval(function(){
var x=100;
var y=100;
angle += 0.01;
var s = Math.sin(angle);
var c = -Math.cos(angle);
gd.beginPath();
gd.fillStyle="#ffff00";
gd.arc(x+(s*70),y+(c*70),10,0,2*Math.PI,false);
gd.fill();
},300)
//最外
gd.beginPath();
gd.strokeStyle="#530a6e";
gd.arc(100,100,90,d2a(0),d2a(360),false);
gd.stroke();

/*gd.beginPath();
gd.strokeStyle="#8304ff";

gd.arc(100,100,90,d2a(-90),d2a(-180),6*Math.PI);
gd.stroke();*/
setInterval(function(){
var x=100;
var y=100;
angle += 0.01;
var s = Math.sin(angle);
var c = -Math.cos(angle);
gd.beginPath();
gd.fillStyle="#8304ff";
gd.arc(x+(s*90),y+(c*90),10,0,2*Math.PI,false);
gd.fill();
console.log(x+(s*90));
},300)

//小圆点
gd.beginPath();
gd.fillStyle="#fff";
gd.arc(77,55,5,0,2*Math.PI,false);
gd.fill();
};
draw();
};

代码上完，有兴趣的可以复制到编译器上，自己运行下效果，如果有什么问题可以留言交流。

巴特西

canvas三环加载进度条

最新文章

热门文章