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

Carlos Dk

Apasionado por la enseñanza y el SEO

3 comentarios en “Pintar cuadrícula en HTML5

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.