Recientemente comencé a aprender html y actualmente estoy trabajando en java script. Mi problema es que detendría el programa hasta que se haya cargado una imagen, luego dibujaría la imagen en un lienzo (porque si la imagen no se carga y quiero dibujarla en un lienzo, no se mostrará nada).
Aquí está mi código (poner en un archivo):
<html> <head> <title>dog food</title> <link rel = "icon" href = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQudx87gpctKJdgDyq5DpVlb12fI3_7XgbfXw&usqp=CAU"> <style> canvas.GameWindow { display : block; margin-left : auto; margin-right : auto; } </style> </head> <body> <canvas width = 600 height = 350 class = GameWindow>Sorry but the canvas is not taken by your web browser</canvas> <script> var canvas = document.querySelector('canvas'); var ctx = canvas.getContext('2d'); //initialize canvas /*ctx.fillStyle = 'black'; ctx.fillRect(0, 0, 600, 350);*/ //create function function drawAnImage(positionX,positionY,width,height,image) { ctx.drawImage(image, positionX, positionY, width, height); console.log("an image has been drawn"); }; var img = new Image(); img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQudx87gpctKJdgDyq5DpVlb12fI3_7XgbfXw&usqp=CAU"; img.onload = function() { console.log("image load"); }; drawAnImage(0,0,100,100,img); </script> </body> </html>En realidad, cuando ejecuto el código, no se muestra nada en el lienzo porque la imagen se carga después de llamar a la función drawAnImage.
Espere a que se cargue con una devolución de llamada:
img.onload = function () { drawImage(0, 0, 100, 100, img); };También puede hacer algo si hubo un error al cargarlo:
img.onerror = function () { alert("Oh no an error!"); }; Aquí está con funciones de flecha ES6 y addEventListener :
img.addEventListener("load", () => { drawImage(0, 0, 100, 100, img); }); img.addEventListener("error", () => { alert("Oh no an error!"); });Así que finalmente uso este pequeño algoritmo para cargar imágenes:
const imageToLoad = []; var totalImage = imageToLoad.length; let imageLoad = []; for (var i = 0;i<totalImage;i++) { var img = new Image(); img.src = imageToLoad[i]; imageLoad.push(img); img.onload = function() { if (i == totalImage) { //here i start my game loop gameLoop(imageLoad); }; }; }; Entonces, ¿para qué sirven los valores? El primer imageToLoad es donde colocaría las imágenes que desea usar e imageLoad es donde encontraría las imágenes cargadas. Finalmente, para las personas interesadas en el algoritmo, el algoritmo cada vez que se cargue una imagen vería si es la última imagen en cargarse, si es así, el algoritmo iniciaría en mi caso el gameloop del juego.