之前做了一個三個圓形疊加在一起的加載，用的是定位和cile來操作，但是加載的頭部不能是圓形。后來用canvas做了一個，但是這個加載的進度不好調整，原理很簡單，就是讓一個圓，按照圓形軌跡進行運動就可以了，也不需要擦除運動軌跡，就像是進度加載一樣。不多說，直接上代碼：

結構很簡單：一個canvas就搞定

<canvas id="c1" width="200" height="200">
　　<span>您的瀏覽器版本過低了，不支持canvas</span>
</canvas>

主要是樣式，樣式用的很簡單，也很復雜，簡單就是看的清楚，復雜是沒有復用，代碼寫的過多了

<style>
　　body{text-align: center;}
　　canvas{background: #fff;}
　　span{color: #fff;font-size: 50px;}
</style>

<script>
function d2a(n){
return n*Math.PI/180;
}
window.οnlοad=function(){
var oC=document.getElementById('c1');
var gd=oC.getContext('2d'); //畫筆

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();
};

代碼上完，有興趣的可以復制到編譯器上，自己運行下效果，如果有什么問題可以留言交流。

轉載于:https://www.cnblogs.com/somejs/p/7883680.html

總結

以上是生活随笔為你收集整理的canvas三环加载进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。