Pintar cuadrícula en 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 cuadrícula en HTML5

agosto 21, 2011 · By VideoTutoriales

En un artículo anterior vimos como pintar en HTML5 al pulsar un botón con el ratón, esta vez y para acercarnos a la aplicación del tilador que queremos desarrollar hemos avanzado y creado la forma de pintar para que se adapte a una cuadrícula.

El código que hay que modificar es el de la siguiente función:

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);
}

Solo utilizamos un cálculo de redondeo a la baja con Math.floor hacemos que el decimal que pueda surgir de la división entre 20 simplemente lo omita, luego volvemos a multiplicarlo sin ese decimal y obtendremos el valor integro.

El código completo os lo vuelvo a poner por si lo necesitais:

<script type=”text/javascript”>
//Declaro variables
var x = 0;
var y = 0;
var x2 = 0;
var y2 = 0;

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

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();
}

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);
}

</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>Para pintar, solo haz click en una dimensión de 500×500 píxeles alineada a la derecha :) </p>
<a href=”http://www.vertutoriales.com/index.php/evento-click-en-html5-pintar-con-el-raton/” target=”_blank”>Para ver el tutorial click Aqu&iacute;.</a>
</body>

</html>

 

Podeis ver el ejemplo de como pintar una cuadrícula en HTML5, espero que os sirva!!

Más video tutoriales para que aprendas...

3 Respuestas

  1. Pintar una imagen al hacer click con HTML5 - Tutoriales y Videotutoriales en www.vertutoriales.com

    agosto 21st, 2011 a 12:51 am

    1

    [...] 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 [...]

  2. Rosario

    diciembre 9th, 2011 a 2:27 am

    2

    Me gusto este ejemplo, una consulta, al copiar el codigo y ejecutarlo no hace nada, sera que le falta algo???

    Espero me puedan ayudar
    Gracias

  3. VideoTutoriales

    diciembre 12th, 2011 a 7:52 am

    3

    Comprueba las comillas del código, es posible que al copiar y pegar tome otra codificación las comillas dobles y pongan otro caracter ascii.

    Un saludo.


Insertar al RSS los comentarios de esta entrada

Escribe tu comentario





«
»