Introdução
Oi galera, esse é meu primero post, depois de 2 meses pronto o blog, inclusive nesse dominio, finalmente consegui tempo e um bom tópico para dar início a essa nova fase nesse novo ano da minha vida. Em breve farei um post falando mais sobre mim, mas tem um pequeno resumo na área de sobre caso você tenha interesse. Sem mais, vamos ao que interessa.
Nesse post trataremos do básico sobre o canvas, que são as formas, mas pretendo fazer uma série de 3 posts(1/semana) finalizando com um efeito de particulas maneirissimo, utilizando eventos de mouse, aleatoriedade, fisica... Será bem legal !
O que é canvas?
Antes de mexer com ele, seria útil entendermos o que é ele.
O canvas veio com o HTML5 e a proposta era bem simples, apresentar computação gráfica na web(no lugar do flash). Ele pode ser utilizado para apresentação de elementos em 2D e 3D com o WebGL, com o canvas poderemos apresentar desenhos estáticos ou animados de forma simples ou complexa.
O canvas em si é somente uma tag html, para realizar os desenhos e as animações dentro da tag, ou palco, precisaremos utilizar o javascript, ajuda se tivermos um pouco de conhecimento sobre formas como retangulos, circulos e linhas.
Iniciando
Antes de tudo, precisamos criar nosso arquivo html e js, no html precisaremos somente adicionar a tag <canvas></canvas>.
...
<canvas id="mycanvas" width="150" height="150"></canvas>
<!--
o ID não é obrigatório, só vai facilitar nosso trabalho mais na frente
Adicionar o width e height direto na tag é indicado, caso você
faça por CSS seus desenhos no palco ficarão distorcidos
width e height padrão é 300x150 pixels respectivamente
-->
...
No nosso arquivo javascript, iremos fazer uma função simples chamada draw e avisar ao navegador que é para ela ser executada quando a página for carregada.
window.onload = draw;
function draw(){
// aqui obtemos a referencia ao DOMNode do canvas,
// por isso utilizamos um id acima, para faciliar essa obtenção
// você também poderia pegar pelo nome da tag ou class
var canvas = document.getElementById("mycanvas");
// aqui informamos ao navegador que estaremos
// utilizando o contexto bidimensional/2D
var context = canvas.getContext("2d");
}
Criados esses dois arquivos, vamos as formas.
Formas
Nosso palco 2D segue um sistema de coordenadas cartesianas com a origem começando em (0, 0) no topo superior esquerdo. X incrementa para a direita, e Y incrementa para baixo, no próximo post iremos ver como "simular" um plano cartesiano tradicional com a origem começando no canto inferior esquerdo.
Nas formas, existem somente 2 primitivos, o retângulo e o path("caminho") que nada mais é que um conjunto de pontos que concretizam uma forma.
Retângulos
O retângulo é uma forma primitiva e a mais comum, com essa forma poderemos criar backgrounds, limpar nosso palco e desenhar coisas também. Para criar nosso retângulo utilizaremos a função .fillRect(x, y, width, height) .
window.onload = draw;
function draw(){
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
// em nosso contexto, criaremos nosso retângulo
context.fillRect(0, 0, 150, 150);
// deverá aparecer um retângulo preto tapando
// toda nossa área do canvas, como se fosse
// um background
}
Círculos
Os círculos são caminhos formados por um conjuntos de pontos que seguem uma relação trigonométrica. As extremidades sempre serão equidistantes do centro, baseado em um raio que iremos determinar.
Para não termos que desenhar ponto a ponto, a canvas API nos fornece uma função de utilidade que irá criar esse círculo para nós, .arc(x, y, raio, anguloInicial, anguloFinal [, sentidoAntiHorario]) .
window.onload = draw;
function draw(){
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.fillRect(0, 0, 150, 150);
// existem passos muito importantes no processo
// de desenhar um caminho, são eles:
// 1º iniciar um caminho
context.beginPath();
// 2º desenhar o caminho que desejamos
context.arc(75, 75, 40, 0, Math.PI*2);
// 3º finalizar o caminho
context.closePath();
// 4º adicinar um preenchimento ou borda
// na forma que criamos
context.strokeStyle = "white";
context.stroke();
}
Se você seguiu os passos corretamente até aqui, surgiu um círculo no melhor estilo "O chamado" no meio do seu palco.
Linhas
Linhas são caminhos formados por uma função onde y = ax + b, ou famosa equação da reta. Novamente a API de "caminhos" nos fornece uma função de utilizade que ja desenha a linha inteiramente para nós, .lineTo(x, y) .
window.onload = draw;
function draw(){
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.fillRect(0, 0, 150, 150);
context.beginPath();
context.arc(75, 75, 30, 0, Math.PI*2);
context.closePath();
context.strokeStyle = "white";
context.stroke();
// iremos seguir todos os passos de caminho
// abrir, desenhar, fechar, e adcionar borda/preenchimento
context.beginPath();
// a função .moveTo(x, y) serve para mudar
// o local em que o caminho está posicionado
// como se fosse você levantando o lapís de
// uma folha, e encostando em outro local
context.moveTo(75, 17);
// nosso triângulo
context.lineTo(135, 107);
context.lineTo(15, 107);
context.lineTo(75, 17);
context.lineTo(75, 107);
// outra forma de criar um retângulo
// só que em forma de "caminho", não primitivo
context.rect(5, 5, 140, 140);
// fechar e fazer o contorno do triangulo
context.closePath();
context.stroke();
}
Se você fez todos os passos corretamente, surgiu uma figura que você talvez conheça. É o símbolo das relíquias da morte em Harry Potter ! :D
See the Pen Reliquias mortais by Matheus Mesquita (@mathmesquita) on CodePen.
Conclusão
Esse post ficou maior do que o esperado, quando comecei a escrever não achei que ficaria tão grande assim. Não conseguimos abordar todas as formas. Mas não se preocupem, que essas são as principais.
No próximo post iremos abordar transformações matriciais, (translação, rotação e escala), apesar do nome dificil, tudo isso é bem comum no CSS3, e aqui vai funcionar de forma semelhante.
Espero de coração que vocês tenham gostado desse post, foi o meu primeiro e estou sempre aberto a críticas e sugestões nos comentários ou no meu email!
O próximo post da série ja está disponível !
