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.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Tu software de gestión


Últimas preguntas:

Logo Dkreativo
Vertutoriales