圆形进度条

title: 圆形进度条
date: 2017-12-25 20:21:17
tags:

canvas模拟进度条

利用 canvas 圆形 arc() 和 js 定时器 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)