HTML5 ( canvas, javascript ) 图片，做痕迹答案

【问题标题】：HTML5 ( canvas, javascript ) The image, makes tracesHTML5 ( canvas, javascript ) 图片，做痕迹
【发布时间】：2022-01-05 03:32:04
【问题描述】：

enter image description herefirstly 对不起我的英语。其次，我的 javascript 有问题。我试图制作像baner这样的东西来改变里面的图像。但是当我想继续我的脚本时，画布字段中的最后一张图片让我遇到了问题。它使留下痕迹。这是我的代码。

<html>
<head>
    <link rel="stylesheet" href="style.css">
    <script>
       
       var cat= new Image();

       function init(){
           cat.src = 'cat.png';
           window.requestAnimationFrame(draw);
       }

       function draw() {

        var context = document.getElementById('spin').getContext('2d');
        
        context.clearRect(0, 0, 530, 110);
        context.save();
        context.translate(-1, 0);
        
     
        context.drawImage(cat, 5, 0);
        context.drawImage(cat, 110, 0);
        context.drawImage(cat, 215, 0);
        context.drawImage(cat, 320, 0);
        context.drawImage(cat, 425, 0);
        context.drawImage(cat, 530, 0); /// its an image with problem
        
        
        
        
        

        window.requestAnimationFrame(draw);

       }

       init();

     
    </script>
</head>
<body>

 <div class="roulette">
       <canvas id="spin" width="530" height="110"></canvas>
    </div>

</body>

【问题讨论】：

标签： javascript html css animation canvas

【解决方案1】：

你从不调用context.restore()，所以你在内存中堆积了很多 CanvasStates（这将使你的整个应用程序在几分钟内变慢），更直接地引人注目的是，你的上下文转换永远不会重置，这意味着在第二次调用坐标0, 0 将是坐标-1, 0 和第三次调用-2, 0 等处的像素，这将使您对clearRect() 的调用每次都会错过画布右侧的一个像素。

目前还不清楚您要做什么，但要正确清除上下文，请在调用 clearRect() 之前调用 context.setTransform(1, 0, 0, 1, 0, 0)，这会将转换矩阵重置为其单位矩阵。
然后，如果您想通过不断减小的值来转换上下文，请将该值存储在一个变量中，并在您对 translate() 的调用中使用它。
最后，删除对save() 的调用，因为它不需要。

let x = 0; // the variable where we store the current offset
var cat = new Image();

function init() {
  cat.src = 'https://picsum.photos/110/110';
  // always wait for your image has loaded before doing anything with it
  cat.onload = evt =>
    window.requestAnimationFrame(draw);
}

function draw() {

  var context = document.getElementById('spin').getContext('2d');
  // update the offset
  x -= 1;
  // last image is hidden, stop the loop?
  if (x < (530 + 110) * -1) {
    return;
  }
  // reset the context matrix
  context.setTransform(1, 0, 0, 1, 0, 0);
  // clear the full canvas
  context.clearRect(0, 0, 530, 110);
  // set the updated offset
  context.translate(x, 0);

  context.drawImage(cat, 5, 0);
  context.drawImage(cat, 110, 0);
  context.drawImage(cat, 215, 0);
  context.drawImage(cat, 320, 0);
  context.drawImage(cat, 425, 0);
  context.drawImage(cat, 530, 0);

  window.requestAnimationFrame(draw);

}

init();

&lt;canvas width="530" height="110" id="spin"&gt;&lt;/canvas&gt;

【讨论】：

【解决方案2】：

在 javascript 中加载图像时，请注意此过程是异步的。给Image元素的src属性赋值时，需要在该元素的onload回调函数中获取该元素。否则，当绘制到画布时，元素可能没有完全加载相应的图像资源。

const img = new Image()

img.onload = function () {
  // img fully loaded here
}

img.src = 'path/to/image/sources'

【讨论】：

还是不行，我把“cat.onload……”放在了draw函数里面。如果可以，请帮助我：/
而不是 window.requestAnimationFrame(draw) 中的第一个 draw()，并注释掉第二个。我猜这应该是你所期望的。
主题已解决，但仍然感谢您的帮助:)