Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
Utilização básica do Canvas
<canvas>HTML em si. No final desta página, você saberá como configurar um contexto de canvas 2D e desenhar um primeiro exemplo em seu navegador.O elemento<canvas>
Vamos começar esse tutorial olhando o elemento<canvas> em si.
<canvas width="150" height="150"></canvas>Se parece muito com o elemento<img>com a diferença de não possuir os atributossrc ealt. O elemento<canvas> tem apenas dois atributos -width eheight. Ambos são opcionais e podem ser aplicados utilizando as propriedadesDOM respectivas. Se não forem especificados, o canvas será iniciado com300pixels de largura por150pixels de altura. O elemento pode ser redimensionado porCSS, mas durante a renderização a imagem é escalonada para caber no tamanho do layout.
Nota:Se as suas renderizações parecerem distorcidas, tente especificar os atributoswidth eheight no<canvas> e não usando CSS.
O atributoid não é específico do elemento<canvas> mas um dos atributos padrão do HTML que pode ser aplicado em (quase) todos os elementos HTML (como oclass por exemplo). É sempre uma boa ideia inserir umid pois fica muito mais fácil de capturar o elemento no seuscript.
O elemento<canvas> pode ser estilizado como qualquer imagem (margem, borda, fundo, etc). Contudo, essas regras não afetarão o desenho no canvas. Nós veremos como isso é feito a seguir nesse tutorial. Quando nenhuma regra de estilo for aplicada, o canvas iniciará totalmente transparente.
Conteúdo alternativo
Uma vez que alguns navegadores mais antigos (em particular, versões do Internet Explorer anteriores a 9) não suportam o elemento<canvas>, você precisará prover um conteúdo alternativo para ser mostrado nesses navegadores.
Isto é muito simples: basta inserir o conteúdo alternativo dentro do elemento<canvas>. Navegadores que não suportam o<canvas> irão renderizar o conteúdo alternativo. Já os navegadores que suportam<canvas> irão ignorar o conteúdo alternativo, renderizando o canvas normalmente.
Por exemplo, podemos prover um texto descritivo do canvas ou uma imagem estática do conteúdo. Algo como isto:
<canvas width="150" height="150"> preço das ações: $3.15 +0.15</canvas><canvas width="150" height="150"> <img src="images/clock.png" width="150" height="150" alt="" /></canvas>Tag</canvas> é necessária
Ao contrário do elemento<img>, o elemento<canvas> a tag de fechamento (</canvas>) é necessária.
Nota:Embora as primeiras versões do navegador Safari da Apple não exijam a tag de fechamento, a especificação indica que ela é necessária para que haja maior compatibilidade, portanto não se esqueça de incluí-la. Essas versões do Safari (antes da versão 2.0) irão processar o conteúdo do alternativo, além da própria tela, a menos que você use o CSS para mascará-lo. Felizmente, os usuários dessas versões do Safari são raros hoje em dia.
Se o conteúdo alternativo não for necessário, um simples<canvas ...></canvas> é totalmente compatível com todos os navegadores que suportam canvas.
O contexto de renderização
<canvas> cria uma superfície de desenho de tamanho fixo que expõe um ou mais contextos de renderização, que são usados para criar e manipular o conteúdo mostrado. Vamos nos concentrar no contexto de renderização 2D. Outros contextos podem fornecer diferentes tipos de renderização; por exemplo,WebGL usa um contexto 3D ("experimental-WebGL") baseado emOpenGL ES.
Inicialmente o canvas é branco. Para mostrar alguma coisa, primeiro umscript precisa acessar o contexto de renderização e desenhar sobre ele. O elemento<canvas> tem ummétodo chamadogetContext(), usado para obter o contexto de renderização e suas funções de desenho.getContext() recebe o tipo de contexto como parâmetro. Para gráficos 2D, que serão abrangidos nesse tutorial, deverá ser especificado "2d".
var canvas = document.getElementById("tutorial");var ctx = canvas.getContext("2d");A primeira linha recupera o nó DOM do elemento<canvas> chamando o métododocument.getElementById(). Depois de ter o nó do elemento, podemos acessar o contexto de desenho usando o métodogetContext().
Verificação de suporte
O conteúdo alternativo é mostrado nos navegadores que não suportam o elemento<canvas>, mas essa checagem pode ser feita através de umscript simplesmente testando a presença do métodogetContext():
var canvas = document.getElementById("tutorial");if (canvas.getContext) { var ctx = canvas.getContext("2d"); // codigo de desenho aqui} else { // codigo para quando o canvas nao for suportado aqui}Um modelo de estrutura
Aqui, um modelo minimalista, que vamos usar como ponto de partida para os exemplos posteriores:
Nota:não é uma boa prática incorporar um script dentro do HTML. Nós fazemos isso aqui para manter o exemplo conciso.
<html> <head> <title>Canvas tutorial</title> <script type="text/javascript"> function draw() { var canvas = document.getElementById("tutorial"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); } } </script> <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body onload="draw();"> <canvas width="150" height="150"></canvas> </body></html>Oscript inclui a função chamada draw(), que é executada uma vez ao término do carregamento da página; este exemplo usa o eventoonload do documento. Essa função, ou uma parecida, poderia usarwindow.setTimeout(),window.setInterval(), ou qualquer outro manipulador de evento, contanto que a página tenha sido carregada primeiro.
Um simples exemplo
Para começar, vamos dar uma olhada num exemplo simples que desenha a interseção de dois retângulos, dos quais um deles tem uma transparência. Exploraremos em mais detalhes o funcionamento nos exemplos posteriores.
<html> <head> <script type="application/javascript"> function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect(10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect(30, 30, 55, 50); } } </script> </head> <body onload="draw();"> <canvas width="150" height="150"></canvas> </body></html>Este exemplo parece assim: