ingrese la descripción de la imagen aquí en primer lugar, lo siento por mi inglés. En segundo lugar, tengo un problema con mi javascript. Estoy tratando de hacer algo como baner que cambia las imágenes en el interior. Pero cuando quiero continuar con mi guión, la última imagen fuera del campo del lienzo me causa problemas. Hace dejar huellas. Es mi código.
<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>Al cargar imágenes en javascript, tenga en cuenta que este proceso es asíncrono. Al asignar un valor al atributo src de un elemento de imagen, debe obtener el elemento en la función de devolución de llamada onload de este elemento. De lo contrario, al dibujar en el lienzo, es posible que el elemento no haya cargado completamente el recurso de imagen correspondiente.
const img = new Image() img.onload = function () { // img fully loaded here } img.src = 'path/to/image/sources'Nunca llama a context.restore() , por lo que está apilando una gran cantidad de CanvasStates en la memoria (lo que hará que toda su aplicación se ralentice en unos minutos), y más directamente perceptible, su transformación de contexto nunca se reinicia, lo que significa que en el segundo llame a la coordenada 0, 0 serán los píxeles en las coordenadas -1, 0 y en la tercera llamada -2, 0 etc., lo que hará que su llamada a clearRect() pierda un píxel más en el lado derecho del lienzo cada vez.
No está muy claro lo que buscaba, pero para borrar correctamente su contexto, llame a context.setTransform(1, 0, 0, 1, 0, 0) antes de llamar a clearRect() , esto restablecerá la matriz de transformación a su matriz de identidad.
Luego, si desea traducir su contexto por un valor cada vez menor, almacene ese valor en una variable y utilícelo en su llamada a translate() .
Finalmente, elimine esa llamada a save() porque no es necesaria.
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(); <canvas width="530" height="110" id="spin"></canvas>