帖子代码
<style>
#papa { margin:0 0 0 calc(50% - 593px); width: 1024px; height: 600px; box-shadow: 3px 3px 6px #333; z-index: 1; }
#canv { cursor: pointer; }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=501214981" autoplay loop></audio>
<canvas id="canv" width="1024" height="600" style="border: 1px solid gray" title="播放/暂停"></canvas>
</div>
<script>
/* 画面移动代码改自Firefox工程师的示例 */
(function () {
let ctx = canv.getContext("2d");
let img = new Image();
img.src = "https://638183.freep.cn/638183/t24/1/u9.jpg";
let CanvasXSize = papa.offsetWidth,
CanvasYSize = papa.offsetHeight,
speed = 30,
scale = 1.05,
x = 0,
y = -4.5,
dx = 0.75;
let imgW, imgH, clearX, clearY, mTimer;
let draw = () => {
ctx.clearRect(0, 0, clearX, clearY);
if(imgW <= CanvasXSize) {
if(x > CanvasXSize) x = -imgW + x;
if(x > 0) ctx.drawImage(img, -imgW + x, y, imgW, imgH);
if(x - imgW > 0) ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
}else{
if(x > CanvasXSize) x = CanvasXSize - imgW;
if(x > CanvasXSize - imgW) ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
}
ctx.drawImage(img, x, y, imgW, imgH);
x += dx;
};
let mState = () => mTimer = aud.paused ? clearInterval(mTimer) : setInterval(draw, speed);
img.onload = () => {
imgW = img.width * scale;
imgH = img.height * scale;
if(imgW > CanvasXSize) x = CanvasXSize - imgW;
clearX = imgW > CanvasXSize ? imgW : CanvasXSize;
clearY = imgH > CanvasYSize ? imgH : CanvasYSize;
draw();
};
aud.onpause = aud.onplaying = () => mState();
canv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
| 
发表于 2024-3-22 11:53
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-3-22 13:04
发表于 2024-3-22 16:49
发表于 2024-3-22 16:52
问好并赞许先生！
赞！
