Pintar cuadrícula en HTML5

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!!

Te puede interesar:

3 comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *