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. Los campos obligatorios están marcados con *

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