Etiqueta HTML <canvas>

Definição e uso

<canvas> As etiquetas geralmente são desenhadas em tempo real pelo script (geralmente JavaScript).

<canvas> As etiquetas são transparentes, elas são apenas contêineres de gráficos e precisam de scripts para desenharem os gráficos realmente.

em navegadores que desativaram o JavaScript e não suportam <canvas> no navegador, será exibido <canvas> qualquer texto interno ao elemento.

Dica

Aprenda sobre o HTML Canvas em nosso tutorial <canvas> conhecimento sobre o elemento.

Para ver uma referência completa de todos os atributos e métodos, acesse nossa Manual de Referência do Canvas HTML.

Exemplo

Exemplo 1

Desenhe um retângulo vermelho em tempo real e mostre-o no elemento <canvas>:

<canvas id="myCanvas">
Seu navegador não suporta o rótulo canvas.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

Experimente pessoalmente

Exemplo 2

Outro exemplo de <canvas>:

<canvas id="myCanvas">
Seu navegador não suporta o rótulo canvas.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// Abre a opacidade
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

Experimente pessoalmente

Atributo

Atributo Valor Descrição
height Valor em pixels Define a altura da folha de desenho. O valor padrão é 150.
width Valor em pixels Define a largura da folha de desenho. O valor padrão é 300.

Atributos globais

<canvas> O rótulo também suporta Atributos globais no HTML.

Atributos de evento

<canvas> O rótulo também suporta Atributos de evento no HTML.

Configurações CSS padrão

A maioria dos navegadores exibirá os seguintes valores padrão <canvas> Elemento:

canvas {
  height: 150px;
  width: 300px;
}

Experimente pessoalmente

História do <canvas>

Este elemento HTML é projetado para gráficos vetoriais do cliente. Ele não possui comportamento próprio, mas expõe uma API de desenho ao JavaScript do cliente para que os scripts possam desenhar o que quiserem em uma folha de desenho.

O marcador <canvas> foi introduzido pela Apple no navegador da Web Safari 1.3. A razão para essa extensão fundamental do HTML é que a capacidade de desenho do HTML no Safari também é usada pelo componente Dashboard do Mac OS X, e a Apple desejava ter uma maneira de suportar gráficos scriptados no Dashboard.

Os navegadores Firefox 1.5 e Opera 9 seguiram a liderança do Safari. Ambos os navegadores suportam o marcador <canvas>.

Nós até podemos usar o marcador <canvas> no IE e construir um canvas compatível com base no suporte VML do IE usando código JavaScript de código aberto (iniciado pela Google). Ver:http://excanvas.sourceforge.net/.

Os esforços de padronização do <canvas> são promovidos por uma associação não oficial de fabricantes de navegadores da Web, e atualmente o <canvas> já se tornou um rascunho oficial da HTML 5. Ver:http://www.whatwg.org/specs/web-apps/current-work/

Diferenças entre o marcador <canvas> e SVG e VML

Uma diferença importante entre o marcador <canvas> e SVG e VML é que <canvas> possui um API de desenho baseado em JavaScript, enquanto SVG e VML usam um documento XML para descrever o desenho.

Essas duas maneiras são funcionalmente equivalentes, qualquer uma pode ser simulada pela outra. Em primeiro plano, eles são muito diferentes, mas cada um tem pontos fortes e fracos. Por exemplo, o desenho SVG é fácil de editar, bastando remover elementos de sua descrição.

Para remover elementos de um mesmo gráfico de um marcador <canvas>, geralmente é necessário apagar o desenho e redesenhá-lo.

como usar o marcador <canvas> para desenhar

A maioria das APIs de desenho Canvas não está definida no elemento <canvas> em si, mas sim naquele que passa pelo método getContext()em um objeto de ambiente de desenho obtido.

O API Canvas também usa a notação de caminho. No entanto, o caminho é definido por uma série de chamadas de métodos, em vez de ser descrito como uma string de letras e números, como as chamadas beginPath() e arc().

Uma vez definido o caminho, outros métodos, como fill(), operam sobre esse caminho. As várias propriedades do ambiente de desenho, como fillStyle, explicam como essas operações são usadas.

Notas:Uma das razões pelo qual o Canvas API é muito compacto é que ele não oferece suporte algum para o desenho de texto. Para adicionar texto a um gráfico <canvas>, é necessário ou desenhar manualmente e combinar com uma imagem bitmap, ou usar positioning CSS no topo do <canvas> para cobrir o texto HTML.

Suporte do navegador

Os números na tabela indicam a versão do navegador que suportou o elemento pela primeira vez.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0