es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo colocar una imagen sobre un punto en un lienzo?

31 Jul, 2023 Programación

¿Cómo puedo colocar una imagen en cada uno de los objetos?

Actualmente solo muestra puntos, pero necesito mostrar una imagen.

for (var i = 0; i < objects.length; i++) {
    var object = objects[i];
    object.y += spawnRateOfDescent;
    ctx.beginPath();
    ctx.arc(object.x, object.y, 8, 0, Math.PI * 2);

    ctx.closePath();
    ctx.fillStyle = object.type;
    ctx.fill();
}

Intenté esto:

var img = new Image();
img.src = "img/HannyahNED/Cohete_1.png";
img.onload = function () {
    ctx.drawImage(img, object.x, object.y);
};

pero no funcionó.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para poner una imagen en cada objeto, puedes usar el método drawImage() del contexto del lienzo (canvas). Aquí tienes un ejemplo:

    for (var i = 0; i < objects.length; i++) {
    var object = objects[i];
    object.y += spawnRateOfDescent;
    ctx.beginPath();
    ctx.arc(object.x, object.y, 8, 0, Math.PI * 2);
    ctx.closePath();

    var img = new Image();
    img.onload = function() {
        // Dibuja la imagen cuando se cargue
        ctx.drawImage(img, object.x - img.width / 2, object.y - img.height / 2);
    };
    img.src = 'ruta/a/la/imagen.png'; // Reemplaza con la ruta hacia tu imagen
}

    En este ejemplo, se crea un nuevo objeto Image para cada objeto. Cuando la imagen se carga, se llama a la función de devolución de llamada onload que dibuja la imagen en el lienzo utilizando drawImage(). Las coordenadas x e y de la imagen se ajustan para que la imagen esté centrada en el objeto.

    Ten en cuenta que debes reemplazar ruta/a/la/imagen.png con la ruta real hacia tu archivo de imagen. Además, asegúrate de que el archivo de imagen sea accesible desde la página web donde se muestra tu lienzo.

Comments are closed.