HTML5 e JavaScript Classe para Exibir um Grid no Canvas

Na fase de desenvolvimento de um aplicativo ou um game em JavaScript e HTML5 pode ser uma dor de cabeça alinhar objetos na tela ou conferir se eles estão realmente no local correto. Principalmente games e simuladores que utilizam o canvas do HTML5, o alinhamento dos objetos não dá para fazer com o auxílio das extensões de desenvolvedor como por exemplo o Firebug, assim o alinhamento tem que ser feito geralmente na base do olhômetro. Para facilitar principalmente nas etapas iniciais do desenvolvimento de um game criei um grid bem simples e útil que me auxilia, como informado, no alinhamento de objetos. O grid também pode ser utilizado na fase de teste e qualidade para conferir se tudo ficou no local correto. A biblioteca que desenha um grid no canvas já coloquei no GitHub e você pode conferir e baixar aqui. Abaixo tem um exemplo de como utilizar.

Carregando a biblioteca JGridSupport:

[javascript] /** * Class JGridSupport * * JGridSupport: is a JavaScript class/library intended to give * support for app or game developers during the development, it * shows a grid helping to align elements on screen in the exact * position. JGridSupport can be used for other objectives if needed. * * @author Carlos Eduardo da Silva (aka. Tresloukadu) * <carlosedasilva@gmail.com> * @link https://blog.tetranet.com.br/ * @version 1.0 */ JGridSupport = function(config) { this.cell_width = null; this.cell_height = null; this.objContext = null; this.gridWidth = null; this.gridHeight = null; /** * Constructor * * Method in charge to load the environment. */ this.construct = function() { this.cell_width = config.cWidth; this.cell_height = config.cHeight; this.objContext = config.myCtx; this.gridWidth = config.myCtx.canvas.width; this.gridHeight = config.myCtx.canvas.height; this.objContext.strokeStyle = config.lColor; this.chalk_grid(); console.log('JGridSupport loaded.'); }; /** * Chalk Grid * * Method in charge to draw the grind on canvas. */ this.chalk_grid = function() { for (var x = 0; x <= this.gridWidth; x += this.cell_height) { this.objContext.moveTo(0.5 + x, 0); this.objContext.lineTo(0.5 + x, this.gridHeight); } for (var x = 0; x <= this.gridHeight; x += this.cell_width) { this.objContext.moveTo(0, 0.5 + x); this.objContext.lineTo(this.gridWidth, 0.5 + x); } this.objContext.stroke(); }; this.construct(); }; //EOF [/javascript]

Agora um exemplo de como você pode carregar o JGridSupport no seu script:

[javascript] /* This script is a sample file to show you how JGridSupport is loaded and used. This file is intended to be your app, game javascript code. */ // My App, Game context... canvas = document.getElementById('stage'); ctx = canvas.getContext("2d"); canvas.width = 600; canvas.height = 600; ctx = canvas.getContext("2d"); //------------------------------------------------------------ //------------------------------------------------------------ // JGridSupport: section inside your js. //------------------------------------------------------------ // Creating and showing the grid. // cWidth - Cell Width. // cHeight - Cell Height. // lColor - Grid line color. // myCtx - The context you want to draw the grid. new JGridSupport({cWidth : 40,cHeight : 40,lColor : "#FF0000",myCtx : ctx}); //------------------------------------------------------------ //------------------------------------------------------------ // END JGridSupport section. //------------------------------------------------------------ //EOF [/javascript]

Por último temos o HTML com o canvas:

[html] <!doctype html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title>JGridSupport How-to</title> <style type="text/css"> body { background: #000000; } canvas { background: #fff; margin: 20px; } </style> </head> <body> <!-- Canvas element, where the grid will be rendered. --> <canvas id="stage"> Your browser does not support HTML5 canvas!! </canvas> </body> <!-- Loading the Library --> <script src="JGridSupport.js"></script> <!-- SAMPLE SHOWING HOW TO USE JGRIDSUPPORT --> <script src="sampleMyApp.js"></script> </html> [/html]

O resultado do grid no canvas fica como a imagem abaixo:

grid

É isso, conforme mostra o exemplo a utilização é muito simples. O próximo incremento na biblioteca, pretendo colocar para escolher nas configurações a possibilidade de numerar as colunas e linhas.

Consulte também a biblioteca JTouchSupport que deixa seu site, sistema, game com a usabilidade mais fluída em aparelhos touchscreen.