Question

我正在尝试创建一个网页，当用户向下滚动时，该网页上的徽标会变大，最终覆盖整个屏幕。

我一直在用Javascript画布来解决这个问题。当用户滚动时，我想使用一个函数来放大图像的宽度和高度，然后自动刷新画布，以创建平滑的过渡。我还希望图像在缩放时保持在窗口中心。到目前为止，这是我的代码：

<body>
  <canvas id="canvas1" style="border:none;">
    <img id="pic" src="pic.png" alt="logo">
    your browser does not support the HTML5 canvas tag. </canvas>

  <script>
    window.onload=function() {
      c = document.getElementById("canvas1");
      c.width = window.innerWidth;
      c.height = window.innerHeight;
      var ctx = c.getContext("2d");
      var img = document.getElementById("pic");
      ctx.drawImage(img, (c.width/2) - (img.width/2), (c.height/2) - (img.height/2))
     }
   </script>

所以我可以显示静态居中图像，但是现在我不知道如何制定函数来执行转换。如果您有一个完全放弃画布设计的想法，那么我全力以赴。我对从这里要做的事一无所知。

放大图像以使用Javascript滚动显示整个屏幕

0 个答案: