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!
Más video tutoriales para que aprendas...
Encuentre…
1 Respuesta
Pintar tile seleccionado con html5 - Tutoriales y Videotutoriales en www.vertutoriales.com
septiembre 3rd, 2011 a 6:42 pm
1[...] ello hemos modificado el código del anterior tutorial donde pintar una imagen sobre el canvas al hacer click, y le hemos añadido dos imágenes para que tengamos la diferente selección, una variable que [...]
Insertar al RSS los comentarios de esta entrada
Escribe tu comentario