title: 圓形進(jìn)度條
date: 2017-12-25 20:21:17
tags:
canvas模擬進(jìn)度條
利用 canvas 圓形 arc() 和 js 定時(shí)器 setInterval()
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.fillRect(0,0,canvas.width,canvas.height);
var _text = canvas.innerHTML;
var count = Number(_text.substr(0,_text.length-1))
console.log(count);
var i=0;
var timer = setInterval(function(){
i++;
context.clearRect(0,0,100,100);
context.beginPath();
context.lineWidth = 2;
context.strokeStyle = "lightgray";
context.arc(50,50,30,0,Math.PI*2);
context.stroke();
context.beginPath();
context.lineWidth = 2;
context.strokeStyle = "lightgray";
context.arc(50,50,44,0,Math.PI*2);
context.stroke();
context.beginPath();
context.strokeStyle = "darkgray";
context.arc(50,50,37,0,Math.PI*2);
context.lineWidth = 12;
context.stroke();
context.beginPath();
context.textBaseline = "middle";
context.textAlign = "center";
context.font = "20px Arial";
context.fillStyle = "#000000";
context.fillText(`${i}%`,50,50);
context.beginPath();
var grd = context.createLinearGradient(0,0,0,100);
grd.addColorStop(0,"red");
grd.addColorStop(0.25,"yellow");
grd.addColorStop(0.5,"green");
grd.addColorStop(0.75,"pink");
grd.addColorStop(1,"blue");
context.strokeStyle = grd;
context.arc(50,50,37,0,Math.PI*(i*2/100));
context.lineWidth = 12;
context.stroke();
if(i>=count){
clearInterval(timer);
}
},100)
