圆形倒计时进度条(canvas,requestAnimationFrame)

最新推荐文章于 2025-07-16 11:12:30 发布

原创最新推荐文章于 2025-07-16 11:12:30 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #圆形进度条

该博客介绍了如何利用HTML5的canvas元素和requestAnimationFrame创建一个圆形倒计时进度条。通过定义orangeCircle和greyCircle函数绘制不同颜色的圆环，以及text函数自定义文字显示，实现了倒计时的视觉效果。提供了show、pause、clear和updateCircle等方法来控制进度条的显示、暂停、清除和更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(function(exports) {
‘use strict’;
let canvas = document.getElementById(‘timer-canvas’);
let context = canvas.getContext(‘2d’);
let centerX = canvas.width / 2;
let centerY = canvas.height / 2;
let angle = 0;
let animation;
let timeDuration;

function orangeCircle(){
angle += 1;
context.save();
context.strokeStyle = ‘#ff4f1a’;
context.lineWidth = 20;
context.beginPath();
context.lineCap = ‘round’;
context.arc(centerX, centerY, 145 ,
(-Math.PI / 2) - Math.PI * 2 * (angle / 3600 / timeDuration), 1.5 * Math.PI, true);
context.stroke();
context.closePath();
context.restore();
}

function greyCircle(){
context.save();
context.beginPath();
context.strokeStyle = ‘#14141a’;
context.lineWidth = 20;
context.arc(centerX, centerY, 145 , 0, Math.PI * 2, false);
context.stroke();
context.closePath();
context.restore();
}

function text(n){
//内容自定义
//在updateCircle();调用就行
}

function show(duration) {
angle = 0;
timeDuration =duration / 1000 / 60;
context.clearRect(0, 0, canvas.width, canvas.height);
updateCircle();
}

function updateCircle() {
canvas.classList.remove(‘hidden’);
animation = window.requestAnimationFrame(updateCircle, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
greyCircle();
orangeCircle();
}

function pause() {
window.cancelAnimationFrame(animation);
}

function clear() {
window.cancelAnimationFrame(animation);
context.clearRect(0, 0, canvas.width, canvas.height);
canvas.classList.add(‘hidden’);
}

exports.Progressbar = {
show: show,
pause: pause,
clear: clear,
updateCircle: updateCircle
};

})(window);

//调用 duration为毫秒
Progressbar.show(duration);