Estoy tratando de crear un juego de nubes Dino. pero encuentro un problema. Cuando trato de dibujar la imagen del dinosaurio en el lienzo usando el método drawImage, la imagen no se dibuja. Puedes ayudarme por favor.
const canvas = document.querySelector(".canvas"); canvas.height = 400; canvas.width = 800; const ctx = canvas.getContext("2d"); class Dino { constructor(x, y) { this.x = x; this.y = y; this.width = (88 * this.height) / 94; this.height = 70; } draw() { let image = new Image(); image.src = "imgs/player/idle/dino-idle-1.png"; ctx.drawImage(image, this.x, this.y, this.width, this.height); }} const dino = new Dino(20, 200); dino.draw();Traté de dibujar dino usando window.onload pero no funciona
Debe dibujar una imagen en el lienzo solo después de que la imagen esté completamente cargada (por ejemplo, usando el onload de carga en la imagen).
Ejemplo a continuación:
const canvas = document.querySelector(".canvas"); canvas.height = 400; canvas.width = 800; const ctx = canvas.getContext("2d"); class Dino { constructor(x, y) { this.x = x; this.y = y; this.height = 70; this.width = (88 * this.height) / 94; } draw() { const image = new Image(); image.onload = () => ctx.drawImage(image, this.x, this.y, this.width, this.height); image.src = "https://www.fillmurray.com/600/400"; }} const dino = new Dino(20, 200); dino.draw(); <canvas class="canvas"></canvas>