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í.</a>
</body></html>
Podeis ver el ejemplo de como pintar una cuadrícula en HTML5, espero que os sirva!!
Comments
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
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.