朵拉 发表于 2024-3-22 20:41

水墨丹青凤凰城

本帖最后由 朵拉 于 2024-3-22 21:49 编辑 <br /><br /><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=131231" 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://pic.imgdb.cn/item/65fd8c149f345e8d03c3464f.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 20:57

挺好的呢

朵拉 发表于 2024-3-22 21:50

@马黑黑
老师 晚上好，作业有点粗糙，请指正哈{:4_190:}

马黑黑 发表于 2024-3-22 22:09

朵拉 发表于 2024-3-22 21:50
@马黑黑
老师 晚上好，作业有点粗糙，请指正哈

图片头尾差异大，衔接处明显

樵歌 发表于 2024-3-23 07:16

让水墨丹青动起来，很有立体感。

红影 发表于 2024-3-24 22:37

这个不是连续图图，头尾能看出差异，需要处理一下的呢。
欣赏朵宝好帖{:4_204:}
页: [1]
查看完整版本: 水墨丹青凤凰城