1

如何在 header.php 文件中停止此全宽画布动画项的累积布局移位？下面代码中的垂直偏移来自哪里？

<canvas id="myCanvas" height="75" width="1000">
<script>
myCanvas = document.getElementById("myCanvas");
ctx = myCanvas.getContext('2d');
img = new Image();
img.src = "https://yoursite.com/images/image-optimized.webp";
img.alt = "Full Width animation"; 
setInterval(movebgnd, 30);//animation slow, if high: 30
var x = window.innerWidth + 5;//first starting pos 0 is left xx max width of canvas is right -about 1200
var myCanvas, ctx;var img;function movebgnd(){ 
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
x -= 1.4;//side faster, if bigger
//if (x <= -2000) { where the image goes to from the right to left -1000
if (x <= -1000) {
x = window.innerWidth + 100; //start pos of sliding pic-about 1200
}ctx.drawImage(img,0+x,-45)}
</script>
<noscript>最高の体験をするためには、JavaScriptを有効にする必要があります。&lt;/noscript>
</canvas>

当我运行 Google Lighthouse 时，它​​说动画画布中存在累积变化。我不知道如何停止班次，但想保持一切正确的大小，并确保没有累积班次。如果您在 PC 上，您可以在此处看到页面顶部的动画：带有轻微移位的动画画布是否将带有动画的画布放在页面模板文件中更好，只需将其放在内容区域或放入headed.php 文件？

4

0 回答 0