canvas圆形百分比进度条(原创)

Html

Css

// 圆形百分比进度
ctx = canvas1.getContext("2d");
var timer = setInterval(draw, 30);

//初始的绘制角度
var deg = 90;
//绘制
function draw() {
    //清除
    ctx.clearRect(0, 0, canvas1.width, canvas1.height)

//绘制底层的圆
    ctx.beginPath();
    ctx.arc(250, 250, 200, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fillStyle = "orange";
    ctx.fill();

//中间的圆
    ctx.beginPath();
    ctx.arc(250, 250, 150, 0, 2 * Math.PI);
    ctx.shadowColor = 'red';
    ctx.shadowBlur = 10;
    ctx.fillStyle = "#f8f8f8";
    ctx.fill();
    //角度自增
    deg++;
    //绘制进度的圆弧
    ctx.beginPath();
    ctx.arc(250, 250, 155, -90 * Math.PI / 180, -deg * (Math.PI / 180), true);
    ctx.lineWidth = 20;
    //设置渐变
    var grad = ctx.createLinearGradient(250, 0, 250, 500);
    grad.addColorStop(0, 'rgb(115,238,253)');
    grad.addColorStop(1, 'rgb(216,0,132)');
    ctx.strokeStyle = grad;
    ctx.stroke();

//绘制百分比
    ctx.beginPath();
    ctx.textAlign = "center";
    ctx.fillStyle = 'purple';
    ctx.font = '60px serif';
    //计算百分比
    var percent = parseInt((deg - 90) / 360 * 100) + "%";
    ctx.fillText(percent, 250, 240);
    if (deg == 450) {
        clearInterval(timer);
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas圆形百分比进度条(原创)

代码描述：利用canvas来绘制百分比的圆形进度条

1. 先绘制canvas画布
2. 利用定时器来绘制圆形
3. 只是每一帧绘制圆形的一部分而已

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

culiuxiang

相关代码

canvas圆形百分比进度条(原创)

最新