canvas画布圆形进度条播放器

位置: 首页 > 代码集锦
[发布: 2024.3.31 作者: 马黑阅读: 405]

效果：

代码：

<style>

#canv { display: block; margin: 20px auto; transform: scale(1); cursor: pointer; }

</style>

(function() {

let rotDeg = 0, prgDeg = 0, raf;

let ctx = canv.getContext('2d');

ctx.lineWidth = 10;

ctx.lineCap = 'round';

let gradient = ctx.createLinearGradient(0, 0, 200, 200);

gradient.addColorStop(0, 'lightblue');

gradient.addColorStop(.5, 'tan');

gradient.addColorStop(1, 'lightgreen');

let img = new Image();

img.onload = () => mkProg();

img.src = 'https://638183.freep.cn/638183/web/svg/3star-01.svg';

let mkProg = () => {

ctx.clearRect(0, 0, 200, 200);

//底轨圆

ctx.strokeStyle = 'silver';

ctx.fillStyle = gradient;

ctx.beginPath();

ctx.arc(100, 100, 90, 0, 360 * Math.PI/180);

ctx.stroke();

ctx.fill();

//进度圆

ctx.save();

ctx.strokeStyle = 'green';

ctx.beginPath();

ctx.arc(100, 100, 92, 0, prgDeg * Math.PI/180);

ctx.stroke();

ctx.restore();

//旋转图片

ctx.save();

ctx.globalCompositeOperation = 'overlay';

ctx.translate(100, 100);

ctx.rotate(rotDeg * Math.PI/180);

ctx.translate(-100, -100);

ctx.drawImage(img, 20, 20, 160, 160);

ctx.restore();

rotDeg = (rotDeg + 1) % 360;

raf = aud.paused ? cancelAnimationFrame(raf) : requestAnimationFrame(mkProg);

};

aud.onpause = aud.onplaying = () => mkProg();

aud.onseeked = () => cancelAnimationFrame(raf);

aud.onended = () => aud.play();

aud.ontimeupdate = () => prgDeg = aud.currentTime * 360 / aud.duration;

canv.onclick = () => aud.paused ? aud.play() : aud.pause();

})();

</script>

前一篇: 用canvas画布制作首尾衔接图片
下一篇: 单图背景无缝滚动模板二：伪元素背景移动

发表评论:

评论列表 [5条]

#5 | 飞飞于 2024-4-2 21:42 发布: 好哒。又听了一遍，二遍的时候小播，音乐，进度条同步。。越来越完美。。。火狐这个兼容性是天生的，还是可以设置的。。

#4 | 马黑于 2024-4-2 21:08 发布: loop播放情况下，Firefox有兼容性问题，所以取消了audio标签的loop属性。现在修正的效果，应该经得起考验了。

#3 | 悄然于 2024-3-31 17:45 发布: 黑师说明补充：播放器可以调整大小：源码第 2 行代码，transform: scale(1.2); 中，1.2 表示放大 1.2 倍。一楼使用的数值是 0.8 ，播放器的原始尺寸为 200 * 200。

#2 | 飞飞于 2024-3-31 17:13 发布: 圆内旋转图像马上变成了小播，太乐了。。烧脑的跳过，直接抄代码抄贴子。。

#1 | 悄然于 2024-3-31 16:38 发布: 这个音乐好熟悉啊，哈哈。。