La pregunta puede parecer simple, pero no puedo entender cuál es mi error.
Dibujo imágenes en mi lienzo, todo está bien, pero en el momento en que agrego clearRect, los elementos se eliminan por completo del lienzo sin restaurarlos. Aunque el ciclo de limpieza debería ocurrir antes de la renderización
¿Cuál es mi error? todo parece ser simple, pero estoy atascado durante mucho tiempo
Clase de juego principal de la aplicación
Clase de juego: responsable de renderizar el lienzo y limpiarlo.
jugador - responsable de la lógica del comportamiento del jugador
animation - requestanimationframe se llama en esta función, en la función que se le pasó
class App { constructor() { this.player = new Player("Player 1", 0, 102); this.game = new Game(); this.game.CreateCanvas(); window.addEventListener('keyup', () => this.player.UpKey()); window.addEventListener('keydown', (event)=> this.player.HandlerKeyPress(event)); new Animation(this.Display.bind(this)); } Display() { this.game.ClearCanvas(); this.SetLevel(); } SetLevel() { this.game.LoadSprite(assets.mario, [...player_assets.mario.small.standing_right, ...this.player.GetPosition(), 16, 16]); this.StaticObject(); } StaticObject () { for(let i = 0; i < 32; i++){ this.game.LoadSprite(assets.block, [...lvl_1.block.ground.size, i* 16, 134, 16,16]); this.game.LoadSprite(assets.block, [...lvl_1.block.ground.size, i* 16, 118, 16,16]); } } } new App(); export default class Game { CreateCanvas () { this.canvas = document.createElement("canvas"); this.ctx = this.canvas.getContext("2d"); document.body.appendChild(this.canvas); } ClearCanvas() { this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); } SetBackgroundColor (color) { this.ctx.fillStyle = color; this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); } LoadSprite (src, position) { const _image = new Image(); _image.src = src; _image.onload = () => { this.ctx.drawImage(_image, ...position, true); } } } export default class LoopAnimation { constructor(display) { this.display = display; this.Animation = this.Animation.bind(this); this.Animation(); } Animation() { requestAnimationFrame(this.Animation); this.display(); } }Mi sospecha es que está relacionado con el caché y la carga de eventos que no se disparan. El evento image.onload y el caché del navegador sugieren establecer la propiedad onload antes que src .
var img = new Image(); img.onload = function () { alert("image is loaded"); } img.src = "img.jpg";Si desea reutilizar las imágenes cargadas, guárdelas en una matriz. Luego reutilice la imagen desde allí. Ver por ejemplo:
const canvas = document.createElement("canvas"); document.body.appendChild(canvas); canvas.width = 450; canvas.height = 250; const ctx = canvas.getContext("2d"); const assets = [ "https://picsum.photos/id/237/150", "https://picsum.photos/id/235/150", "https://picsum.photos/id/232/150", ]; const assetsLoaded = assets.map(url => new Promise(resolve => { const img = new Image(); img.onload = e => resolve(img); img.src = url; }) ); Promise .all(assetsLoaded) .then(images => { (function gameLoop() { requestAnimationFrame(gameLoop); ctx.clearRect(0, 0, canvas.width, canvas.height); images.forEach((e, i) => ctx.drawImage( e, i * 150 + Math.cos(Date.now() * 0.003 + i) * 20, // x Math.sin(Date.now() * 0.005 + i) * 50 + 50 // y ) ); })(); }) .catch(err => console.error(err)) ; // from https://stackoverflow.com/a/61337279/3807365