Hoje já é de conhecimento de boa parte dos programadores, web designers e profissionais da web em geral, que a HTML5 trouxe vários novos recursos que facilitam (e muito) a implementação de certas funcionalidades que antes requisitavam muito trabalho.
Dentre os vários novos elementos que foram inseridos nessa versão da linguagem base dos web sites, um que rapidamente ganhou grande importância e destaque foi o canvas. Essa tag cria um “quadro” no qual se pode desenhar várias formas geométricas, linhas, figuras, etc.
Tomando como base essa nova tag, já existem várias engines para jogos e jogos prontos completamente desenvolvidos em HTML5 e JavaScript, entre outras implementações que foram desenvolvidas e vem sendo aperfeiçoadas a cada dia.
Buscando explorar um pouco as capacidades desse novo elemento, este artigo apresentará uma forma simples de se implementar, com JavaScript, a funcionalidade de desenhar com o mouse sobre esse quadro (canvas). O código desenvolvido será bastante simples, buscando facilitar a compreensão, e permitirá apenas “riscar” com o cursor do mouse.
Ao fim deste artigo e com algum conhecimento das linguagens utilizadas, o leitor poderá aperfeiçoar o exemplo e adicionar novas funcionalidades.
O código HTML
Criaremos uma página HTML com estrutura bastante simples, que contará apenas com uma tag <canvas> dentro do body. O código da Listagem 1 pode ser copiado e salvo como um arquivo de extensão .html.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Desenhando na canvas</title>
</head>
<body>
<canvas id="quadro" style="background:beige"></canvas>
</body>
</html>Definimos o nome do elemento canvas como quadro e definimos uma cor para o plano de fundo, apenas para diferenciar do plano de fundo da página.
O código JavaScript
Quem de fato dará vida ao nosso quadro de desenhos será a linguagem JavaScript (como era de se esperar).
Como inserir esse código na página, ficará a critério do leitor, mas nesse exemplo manteremos todo JavaScript interno ao HTML. Sendo assim, a Listagem 2 apresenta a estrutura básica desse código. Dentro das tags script trataremos o evento onload do objeto window. Isso é necessário para que tenhamos certeza que todo conteúdo já terá sido renderizado quando tentarmos acessar o elemento canvas.
<script>
window.onload = function () {
//todo conteúdo ficará aqui
}
</script>Como vemos na indicação da linha 3, todo código que será apresentado a seguir deverá ser inserido dentro da função que trata o evento onload da janela, na ordem em que aparecem nas listagens seguintes.
Sendo assim, o próximo passo é definir algumas variáveis que utilizaremos no restante do código.
var largura = 500;
var altura = 300;
var quadro = document.getElementById("quadro");
quadro.setAttribute("width", largura);
quadro.setAttribute("height", altura);
var ctx = quadro.getContext("2d");
var desenhando = false;Nas linhas 1 e 2 da Listagem 3 foram criadas duas variáveis para representar as dimensões do nosso quadro de desenho, que aqui foram definidas como 500x300px. Utilizamos esses valores nas linhas 5 e 6 para dimensionar o elemento canvas.
Nas linhas 4 e 8, respectivamente, criamos referências ao elemento canvas e ao seu contexto 2D, onde faremos os desenhos. Também é possível trabalhar no contexto 3D, mas isso não é objetivo deste artigo.
Na última linha criamos uma variável chamada desenhando que, como o nome sugere, indica se o usuário está ou não desenhando. Na prática, ela será usada para nos informar quando o cursor do mouse está pressionado.
Se abrirmos o arquivo HTML no browser agora, já podemos visualizar o quadro em destaque, conforme ilustra a Figura 1.
O próximo passo será tratar o evento onmousedown do elemento canvas, que é disparado quando o botão do mouse é pressionado com o cursor sobre o elemento.
quadro.onmousedown = function (evt) {
ctx.moveTo(evt.clientX, evt.clientY);
desenhando = true;
}Na linha 2 da Listagem 4 utilizamos o método moveTo para mover o lápis/cursor/ponteiro do contexto para o ponto em que o usuário clicou. Isso indica que algum desenho será iniciado e deverá começar a ser feito a partir daquele ponto.
Na linha 3 definimos a variável desenhando como verdadeira, indicando que o botão do mouse está pressionado e que o usuário está desenhando.
Agora é preciso tratar o evento onmouseup, que ocorre quando o botão do mouse é solto. Nesse momento definiremos a variável desenhando como falsa, indicando que o usuário finalizou um desenho/traço, como mostra a Listagem 5.
quadro.onmouseup = function () {
desenhando = false;
}Por fim, vem o evento onmousemove (Listagem 6), que é disparado quando o cursor do mouse é movimentado sobre o elemento. Isso pode ocorrer tanto com o botão pressionado, quanto com ele solto, por isso criamos a variável desenhando.
quadro.onmousemove = function (evt) {
if (desenhando) {
ctx.lineTo(evt.clientX, evt.clientY);
ctx.stroke();
}
}Na linha 2 verificamos se a variável desenhando possui valor true, ou seja, se o usuário está realmente traçando algo sobre o quadro. Em caso verdadeiro, usamos o método lineTo para traçar uma linha até o ponto em que o cursor se encontra. Como o movimento do mouse será contínuo, serão traçadas pequenas linhas, pixel a pixel.
O método stroke, na linha 4, faz com que a linha desenhada se torne visível. Esse método finaliza o desenho, exibindo-o sobre o quadro (canvas).
Se abrirmos o documento html no browser agora, já podemos ver o código em funcionamento. Basta pressionar o botão do mouse sobre a área destacada e arrastar o mouse para traçar uma linha, como vemos na Figura 2.
Vimos que não foi preciso utilizar nenhum recurso avançado ou funções complexas para atingir nosso objetivo. Tratando apenas os eventos do mouse e usando algumas das funções mais simples do contexto de desenho do elemento canvas, permitimos ao usuário simular um quadro no qual se pode rabiscar utilizando o cursor do mouse.
O exemplo completo desenvolvido está disponível no link download, no topo desta página.
Até a próxima oportunidade.
