帖子代码：
<style>
#papa {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background:
url('https://638183.freep.cn/638183/t24/1/rags2rings1.jpg') no-repeat center/cover,
url('https://638183.freep.cn/638183/t24/1/rags2rings2.jpg') no-repeat center/cover;
background-blend-mode: darken;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#papa:hover {
background-blend-mode: overlay;
}
#canv {
display: block;
margin: 20px auto;
transform: scale(0.75);
cursor: pointer;
}
</style>
<div id="papa">
<canvas id="canv" width="200" height="200" style=""></canvas>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=28949242" autoplay loop></audio>
</div>
<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/flower_3.svg';
let mkProg = () => {
ctx.clearRect(0, 0, 200, 200);
ctx.clearRect(0, 0, 200, 200);
//底轨圆
ctx.strokeStyle = '#ccc';
ctx.beginPath();
ctx.arc(100, 100, 90, 0, 360 * Math.PI/180);
ctx.stroke();
//进度圆
ctx.save();
ctx.strokeStyle = gradient;
ctx.beginPath();
ctx.arc(100, 100, 90, 0, prgDeg * Math.PI/180);
ctx.stroke();
ctx.restore();
//旋转图片
ctx.save();
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>
| 
发表于 2024-3-31 14:29
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-3-31 18:11
