canvas画布圆形进度条播放器

马黑黑

效果：

代码：

<style>     #canv { display: block; margin: 20px auto; transform: scale(0.75); } </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 loop></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, 'red');     gradient.addColorStop(.5, 'orange');     gradient.addColorStop(1, 'green');       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 = '#ccc';         ctx.fillStyle = '#eee';         ctx.beginPath();         ctx.arc(100, 100, 90, 0, 360 * Math.PI/180);         ctx.stroke();         ctx.fill();         //进度圆         ctx.save();         ctx.strokeStyle = gradient;         ctx.beginPath();         ctx.arc(100, 100, 92, 0, prgDeg * Math.PI/180);         ctx.stroke();         ctx.restore();         //旋转图片         ctx.save();         ctx.globalCompositeOperation = 'xor';         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.onseeking = () => raf = cancelAnimationFrame(raf);     aud.ontimeupdate = () => prgDeg = aud.currentTime * 360 / aud.duration;       canv.onclick = () => aud.paused ? aud.play() : aud.pause(); })(); </script>

马黑黑

播放器可以调整大小：

源码第 2 行代码，transform: scale(1.2); 中，1.2 表示放大 1.2 倍。一楼使用的数值是 0.8 ，播放器的原始尺寸为 200 * 200。

马黑黑

这里是放大 1.2 倍的效果：

http://mhh.52qingyin.cn/art/show ... rt=mahei_1711860249

庶民

我就是支持。，

马黑黑

庶民 发表于 2024-3-31 13:08
我就是支持。，

南无月

马黑黑 发表于 2024-3-31 12:49
播放器可以调整大小：

源码第 2 行代码，transform: scale(1.2); 中，1.2 表示放大 1.2 倍。一楼使用的 ...

transform: scale(1.2);
一句代码就可以改变大小。。太神了。
那么，同理。。钟表的贴子里加上这句，也可以改变大小

马黑黑

南无月 发表于 2024-3-31 17:41
transform: scale(1.2);
一句代码就可以改变大小。。太神了。
那么，同理。。钟表的贴子里加上这句，也 ...

是的

南无月

马黑黑 发表于 2024-3-31 12:50
这里是放大 1.2 倍的效果：

http://mhh.52qingyin.cn/art/show.php?st=4&sd=4&art=mahei_1711860249

试了一下把我《凝望》里面的钟表改变，成功变大或者变小，神奇的代码

马黑黑

南无月 发表于 2024-3-31 17:43
试了一下把我《凝望》里面的钟表改变，成功变大或者变小，神奇的代码

这是CSS的能耐

南无月

马黑黑 发表于 2024-3-31 17:43
是的

哎。。
这么神奇的利器，转到网站了。

南无月

马黑黑 发表于 2024-3-31 17:44
这是CSS的能耐

CSS挺神的呀

南无月

另存为PNG图片后发现，里面的SVG图形是中空的。。
ctx.globalCompositeOperation = 'xor';
11. xor : 形状在重叠处变为透明，并在其他地方正常绘制；
是合成模式中这句的实例应用。。

马黑黑

南无月 发表于 2024-3-31 17:51
哎。。
这么神奇的利器，转到网站了。

马黑黑

南无月 发表于 2024-3-31 17:52
CSS挺神的呀

CSS的 transform 属性是形变或转换属性，它能平移（translate）、旋转（rotate）、扭曲（skew）、缩放（scale）元素

红影

看到了globalCompositeOperation = 'xor'，下面的彩色让进度条变得如此绚丽多彩

红影

里面很是轻柔美妙的粉色，在这个季节看着好美啊

红影

这个能显示进度，不是手动控制进度的模式。估计使用画布的，倒这个程度就不错了吧

马黑黑

红影 发表于 2024-3-31 19:54
这个能显示进度，不是手动控制进度的模式。估计使用画布的，倒这个程度就不错了吧

canvas画布不想HTML和svg基于DOM节点，它自己只是一个HTML中的节点，子节点不视为HTML元素，要点击画布里的图像需要额外的计算，目前这个w3c提出了一个API，但能实现的只有Chrome且必须在实验室状态下运行。

但不是不能操作，我们撇开API接口，仅通过算法去实现，也是可行的，问题在于代码量会剧增。所以我这个设计，基本上，内圆很靠近画布边缘，这是为了将来如果有余力解决问题时做个铺垫。

马黑黑

红影 发表于 2024-3-31 19:52
里面很是轻柔美妙的粉色，在这个季节看着好美啊

感谢支持

马黑黑

红影 发表于 2024-3-31 19:51
看到了globalCompositeOperation = 'xor'，下面的彩色让进度条变得如此绚丽多彩