持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

前言

hi,all～ ，上次我们基于canvas实现了一个柱状图，虽说看着有点丑，但看着确实是那么回事。有静必有动，今整个动态的，来用canvas实现一个圆形进度条吧。

第一步

既然是canvas实现，第一步必不可少的就是绘制一个画布了。

// 获取canvas元素并指明2d环境
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');

// 获取中心点坐标
let centerX = canvas.width / 2;
let centerY = canvas.height / 2;

// 每一次加载1%，那就需要把360度等分为100份
let rad = Math.PI * 2 / 100;

// 加载速度
ley speed = 0.1;

第二步

绘制完画布并确定一些基本信息，我们需要绘制一个圆。

function circle() {
    context.save();
    context.beginPath();
    context.strokeStyle = 'white';
    context.arc(centerX, centerY, 100, 0, Math.PI*2, false);
    context.stroke();
    context.closePath();
    context.restore();
}

第三步

嗯，绘制出来了，看着也没问题，那就进行下一步。外边进度圆的绘制。

function outCircle(n) {
    context.save();
    context.strokeStyle = 'pink';
    context.lineWidth = 5;
    context.beginPath();
    context.arc(centerX, centerY, 100, -Math.PI / 2, -Math.PI / 2 + n * rad, false);
    context.stroke();
    context.closePath();
    context.restore();
}

第四步

有点进度条那味了哦！再来绘制文字显示。

function text(n) {
    context.save();
    context.strokeStyle = 'pink';
    context.font = '40px Arial';
    context.strokeText(n.toFixed(0) + '%', centerX - 25, centerY + 10);
    context.stroke();
    context.restore();
}

第五步

嗯，感觉来了，问题也来了，怎么动起来？来看看这个方法window.requestAnimationFrame。

window.requestAnimationFrame()  告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行 -MDN

那就写个让他动起来的函数吧。

function drawFrame() {
    window.requestAnimationFrame(drawFrame, canvas);
    context.clearRect(0, 0, canvas.width, canvas.height);
    circle();
    text(speed);
    outCircle(speed);
    if (speed > 100) {
        speed = 0;
    }
    speed += 0.1;
}

来看看最终效果吧。

总结

本文利用canvas实现了一个圆形进度条。不知大家发现问题了没有，出现了图层混乱的情况。外圈的粉色使内圈的白色受到了影响。怎么解决就交给各位啦！bye～