O que é e como trabalhar com o Canvas | iwtraining
O que é e como trabalhar com o Canvas
Se o elemento vídeo é o garoto propaganda do HTML5, o elemento canvas é Chapolin Colorado (maior super herói de todos os tempos) do HMTL5. É uma das maiores partes da especificação e permite gerar e exibir dinamicamente gráficos, imagens e animações em seus projetos.
Agora com o canvas a sua aplicação web ou mobile híbrida não possui mais limites no que se refere a manipulação de imagens. Você poderá fazer o que sua imaginação mandar, pode aplicar efeitos a imagens, e até construir um "Photoshop" online.
Como qualquer outro elemento, você pode controlar a aparência também do elemento canvas utilizando CSS, adicionando bordas, margens, fontes etc. Além disso, toda a interatividade é feita através do JavaScript.
Tudo o que você deseja no canvas, fica no quadrante 4, sendo o ponto de origem x = 0 e y = 0. Apesar de muito útil, avalie se não há um outro elemento para fazer o que você espera, caso não, use e abuse do canvas.
Abaixo a sintaxe do elemento canvas:
Para usar o canvas, você precisa utilizar um pouco de JavaScript. É necessário localizar o seu contexto para, nele, executar ações.
// Recuperando o canvas
// Recuperando o contexto
Agora que obtivemos o contexto, vamos adicionar uma forma simples na sua página. O código abaixo deseja um quadrado verde na página:
contexto.fillStyle = "rgb(0, 255, 0)";
contexto.fillRect(0, 0, 100, 100);
O método fillStyle determina a cor de fundo do elemento a ser desenhado. O método fillRect é quem desenha o retângulo, os parâmetros que passamos pra ele indicam suas extremidades em pixels.
Substitua o código anterior por este e agora você terá um quadrado de borda vermelha.
contexto.strokeStyle = "rgb(255, 0, 0)";
contexto.strokeRect(9, 19, 52, 52);
Aqui utilizamos o strokeStyle, que é quem determina a cor da linha, depois com o lineWidth determinamos a sua espessura e por ultimo com o strokeRect desenhamos a linha propriamente dita.
Quando desejamos criar uma forma qualquer, digo, de acordo com os nossos parâmetros, utilizando paths. Para iniciar um path, chamamos o método beginPath(). Uma vez que a forma já esteja iniciada,, utilizamos outros métodos para criar o nosso caminho.
moveTo(x,y) – move a localização atual para um novo destino sem desenhar.
lineTo(x,y) – move a localização atual para um novo destino desenhando uma linha reta.
Desenhando um quadrado utilizando paths:
var contexto = document.getElementById("quadro1").getContext("2d");
contexto.moveTo(1,1);
contexto.lineTo(1,100);
contexto.lineTo(100,100);
contexto.lineTo(100,1);
contexto.lineTo(1,1);
Agora vamos ver como desenhar uma retângulo com um gradiente como fundo.
//recuperamos o elemento canvas
//recuperamos a variável de contexto
// Criamos o gradiente
var gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, 250);
Observe que como o gradiente é a passagem de cores seguindo um padrão determinado, no nosso exemplo precisamos passar o ponto da cor1 e da cor2.
Agora determinamos qual será a primeira e a ultima cor.
//Definição do padrão de preenchimento usando o gradiente
//Desenhando o retângulo.
Adicionando uma imagem ao canvas
Você pode adicionar uma imagem e alterá-la dinamicamente. No código abaixo mostramos como fazer isto. Um cuidado adicional que devemos ter é de somente colocar a imagem no canvas após ela ter sido carregada. Saberemos isto criando uma pequena função.
logo.src = "html5badge.png";
// Quando a imagem for carregada
ctx.drawImage(logo,0,0,100,100);
É muito importante testar a compatibilidade e, se for o caso, oferecer um conteúdo alternativo ao canvas para o caso de o navegador o usuário não oferecer suporte a este recurso.
A maneira mais fácil de se fazer isso é utilizando um texto simples dentro do próprio elemento canvas:
Atualize se navegador para visualizar este recurso.
Caso queira, você pode apontar para uma imagem também, adicionando o elemento <img> como você já aprendeu em outro momento.
Caso deseje fazer esta verificação utilizando JavaScript, você pode fazer conforme código abaixo, que tenta criar um elemento canvas e pegar o seu contexto. A ideia é simples: caso não seja possível, ou seja, caso o navegador não dê suporte, um erro será gerado. É através do try.. catch.. que saberemos se deu certo, ou não, para exibir a mensagem correta.