canvas画布圆形进度条播放器
位置:
首页 >
代码集锦[ 发布时间: 2024.3.31 作者: 马黑 阅读: 399 ]
效果：
代码：
<style>
#canv { display: block; margin: 20px auto; transform: scale(1); cursor: pointer; }
</style>
<canvas id="canv" width="200" height="200" style=""></canvas>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2040200174" autoplay></audio>
<script>
(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.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 发布: 这个音乐好熟悉啊，哈哈。。
