"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > ¿Por qué mi imagen no aparece en el lienzo HTML?

¿Por qué mi imagen no aparece en el lienzo HTML?

Publicado el 2024-11-08
Navegar:940

Why Isn\'t My Image Appearing on the HTML Canvas?

Cómo agregar una imagen a un lienzo

En el lienzo HTML, puedes mejorar tus creaciones incorporando imágenes. Sin embargo, encontrar dificultades al intentar hacerlo puede resultar frustrante. Este artículo tiene como objetivo guiarlo a través del proceso, analizar un problema común y brindar una solución.

Problema: A pesar de tener una fuente de imagen existente y no hay errores de JavaScript, la imagen no se muestra en el lienzo.

Solución: Es fundamental asegurarse de que la imagen esté completamente cargada antes de intentar dibujarla en el lienzo. Modifique su código para incluir el detector de eventos de carga en la imagen, como se ve a continuación:

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base() {
  base_image = new Image();
  base_image.src = 'img/base.png';
  
  base_image.onload = function() {
    context.drawImage(base_image, 100, 100);
  };
}

Al incorporar este simple ajuste, su imagen ahora aparecerá exitosamente en el lienzo una vez que se haya cargado, lo que le permitirá mejorar sus diseños con elementos visuales.

Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3