Pintar tile seleccionado con html5 - Tutoriales y Videotutoriales en www.vertutoriales.com
 
 
Diseño de páginas web en Córdoba. Visitanos! Taller de Chapa y Pintura en Córdoba. Hnos Troncha Cartuchos reciclados en Córdoba Joyería y Platería en Córdoba - La Joya de Plata ForoHTML5 canvas Comprar este espacio por 5/mes Recetas de cocina rica y sana Comprar este espacio por 5/mes

Pintar tile seleccionado con html5

septiembre 3, 2011 · By VideoTutoriales

Siguiendo con nuestro mapeador en html5, vamos a ver como seleccionar un tile y pintarlo sobre nuestro canvas en html5.

Para 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 gestionará que imagen se utilizará y la asignación en la función de pintado, además de una función que modifica la variable que gestiona el cambio de la imagen. Así podemos ver el código del tilador:

<script type=”text/javascript”>
//Declaro variables
var x = 0;
var y = 0;
var x2 = 0;
var y2 = 0;
var ImgUso = “vt.jpg”;

window.onload = function()
{
click();

};

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 = ImgUso;
ImagenHTML5.onload = function() {
ctx.drawImage(ImagenHTML5, x, y);
}
}

function click(){
//Añadimos un addEventListener al canvas, para reconocer el click
canvas.addEventListener(“click”,
//Una vez se haya clickado se activará la siguiente función
function(e){
pintar(e.clientX, e.clientY);
}
,false);
}

function pintar(x, y){
//calculo para que los cuadros queden ajustados en una cuadrícula de 10×10

dibujar(Math.floor(x/20)*20, Math.floor(y/20)*20, 20, 20);
}

function SeleccionImagen(imagen){
ImgUso = imagen;
}

</script>

<style type=”text/css”>
<!–
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
–>
</style>

<body>

<canvas id=”canvas” height=”500px” width=”500px”>
Su navegador no soporta Canvas!
</canvas>
<p>
<img src=”vt.jpg” onClick=”SeleccionImagen(‘vt.jpg’)” />
<img src=”dk.jpg” onClick=”SeleccionImagen(‘dk.jpg’)” />
</p>
<p>Para pintar, solo haz click en una dimension de 500×500 pixeles alineada a la izquierda :) </p>
<a href=”http://www.vertutoriales.com/index.php/pintar-una-imagen-al-hacer-click-con-html5/” target=”_blank”>Para ver el tutorial click Aqu&iacute;.</a>
</body>

</html>

Cómo podeis ver, hemos añadido la función SeleccionImagen(imagen) que se lanza cuando hacemos click sobre la imagen en cuestión, pasando el parámetro de la imagen que es.

Además añadimos la variable ImgUso, que guarda el valor a utilizar en la función de dibujar()

Con esto damos un pasito más a nuestro tilador, lo siguiente será mostrar en una caja de texto los valores de la tabla donde se está creando el mapa. Si quereis ver como ha quedado nuestro tutorial en html5 – Seleccionar tile y pintarlo sobre el canvas

Para terminar, deciros que este proyecto está siendo desarrollado para la comunidad Reinos de Papel y que estamos compartiendo los artículos del curso en html5 en español con la comunidad de ForoHTML5

Un saludo!

Más video tutoriales para que aprendas...

1 Respuesta

  1. Array o Matriz bidimensional en Javascript - Tutoriales y Videotutoriales en www.vertutoriales.com

    septiembre 4th, 2011 a 10:08 pm

    1

    [...] a VerTutoriales.com, despues de empezar con las funciones de pintado en html5 para nuestro tilador, vamos a atacar otra parte que sería el guardado tanto del mapa como de los [...]


Insertar al RSS los comentarios de esta entrada

Escribe tu comentario





«
»