Pintar una imagen al hacer click con HTML5

Continuando con el proyecto del tilador, ya se puede ir poniendo un tile en la posición del mapa indicado! Solo tendreis que seguir con el código que pusimos anteriormente y modificar una función.

Lo que antes era:

function dibujar(x,y,x2,y2){
canvas = document.getElementById(“canvas”);
ctx = canvas.getContext(“2d”);

ctx.fillStyle = “red”;
ctx.fillRect(x, y, x2, y2);
ctx.fill();
}

Despues de la modificación para que al pulsar el botón del ratón aparezca una imagen es:

function dibujar(x,y,x2,y2){
canvas = document.getElementById(“canvas”);
ctx = canvas.getContext(“2d”);

//cargo la imagen y lo asigno al canvas
var ImagenHTML5 = new Image();
ImagenHTML5.src = “./vt.jpg”;
ImagenHTML5.onload = function() {
ctx.drawImage(ImagenHTML5, x, y);
}
}

 

Os dejo el ejemplo de como pintar una imagen cargada sobre una cuadrícula en HTML5

Espero que os sirva!

Tags :

Comment (1)

Leave a comment

Sign in to post your comment or sine up if you dont have any account.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Tu software de gestión


Últimas preguntas:

Logo Dkreativo
Vertutoriales