Pintar tile seleccionado con html5
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×10dibujar(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í.</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!
Comments