iwtraining

O que é e como trabalhar com o Canvas Front-end

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:

<canvas></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

var canvas = document.querySelector("canvas");
 
// Recuperando o contexto

var contexto = canvas.getContext("2d");

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.lineWidth = 3;
contexto.strokeRect(9, 19, 52, 52);
quadrado

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.beginPath();

contexto.moveTo(1,1);

contexto.lineTo(1,100);

contexto.lineTo(100,100);

contexto.lineTo(100,1);

contexto.lineTo(1,1);

contexto.lineWidth = 2;


contexto.stroke();

Agora vamos ver como desenhar uma retângulo com um gradiente como fundo.

//recuperamos o elemento canvas

var canvas = document.querySelector("canvas");

//recuperamos a variável de contexto
var ctx = canvas.getContext("2d");
var w = canvas.width
var h = canvas.height;



// 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.

gradient.addColorStop(0, "#fff");

gradient.addColorStop(1, "#000");

Agora determinamos qual será a primeira e a ultima cor.

//Definição do padrão de preenchimento usando o gradiente

ctx.fillStyle = gradient;



//Desenhando o retângulo.

ctx.fillRect(0,0,w,h);

grandiente

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.

var ctx = document.querySelector("canvas").getContext("2d");
var logo = new Image();
logo.src = "html5badge.png";

// Quando a imagem for carregada
logo.onload = function() {
    ctx.drawImage(logo,0,0,100,100);
}

Verificando Compatibilidade

É 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:

<canvas>
   Atualize se navegador para visualizar este recurso.
</canvas>

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.

try {
   document.createElement("canvas").getContext("2d");
   alert("O canvas é suportado por este navegador.");
}
   catch (e) {
   alert("O canvas NÃO é suportado por este navegador.");
}

Está com duvidas?

Aluno iwtraining tem acesso a um fórum exclusivo para discutir com os instrutores e outros alunos. Acesse agora mesmo!

Share this article

Em seus 12 anos de experiência, tanto em design como em desenvolvimento, trabalhou em diversos projetos, muitos de grande porte, para clientes como Banco do Nordeste, Sebrae, Anna Pegova, Grupo Deib Otoch, dentre outros. Como designer, trabalha com o Adobe Photoshop desde a versão 3.0, além do Illustrator, sendo certificado pela Adobe (ACE e ACI) nestes softwares. Como desenvolvedor, foca seus esforços atualmente no ActionScript 3.0 (Plataforma Flash) e Objective-C (iOS). Ministra, desde 2005, treinamentos na @iwtraining para estudantes e profissionais, além de grandes empresas como Cagece, TRE, TRT, Esmaltec, Grupo Edson Queiroz, Sebrae, Senac, Correios.

Posts Relacionados

Deixe um comentário