O HTML <canvas> elemento é usado para desenhar gráficos em uma página web.
O gráfico à esquerda é criado com <canvas> . Ele mostra quatro elementos: um rectângulo vermelho, um rectângulo de gradiente, um rectângulo multicolor, e um texto multicoloridos.
O que é HTML Canvas ?
O HTML <canvas> elemento é usado para desenhar gráficos, em tempo real, através de scripting (usually JavaScript) .
O <canvas> elemento só é um recipiente para gráficos. Você deve usar um script para realmente desenhar os gráficos.
Canvas tem vários métodos para desenhar caminhos, caixas, círculos, texto e adicionando imagens.
O elemento de tela é parte do HTML5 e permite a renderização dinâmica, scripts de formas 2D e imagens bitmap. É um nível baixo, o modelo processual que atualiza um bitmap e não tem um grafo de cena embutido.
Suporte navegador
Os números na tabela especificar a primeira versão do navegador que suporta plenamente o <canvas> elemento.
| Elemento | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9 | 2,0 | 3.1 | 9 |
História
Canvas foi inicialmente introduzido pela Apple para uso dentro de seu próprio componente X WebKit Mac OS em 2004 aplicações através de alimentação, como widgets do Dashboard e o navegador Safari.
Mais tarde, em 2005, foi adotada na versão 1.8 dos browsers Gecko, e Opera, em 2006, e padronizado pela Aplicação Grupo de Trabalho Web Hypertext Tecnologia (WHATWG) sobre novas especificações propostas para tecnologias web de próxima geração.
Uso
Lona é constituída por uma região amovível definido no código HTML com atributos de altura e largura. código JavaScript pode acessar a área através de um conjunto completo de funções de desenho semelhantes aos de outras APIs 2D comuns, permitindo assim gráficos gerados dinamicamente.
Alguns usos esperados de lona incluem gráficos de construção, animações, jogos e composição da imagem.
Canvas Exemplos
A canvas é uma área retangular em uma página HTML. Por padrão, a canvas não tem fronteiras e sem conteúdo.
A marcação parece com isso:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: Sempre especifique um atributo id (to be referred to in a script) , e uma largura e altura atributo para definir o tamanho da canvas .
Para adicionar um limite, utilize o style atributo:
Básico Canvas Exemplo
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas> Tente você mesmo " Desenho com JavaScript
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75); Tente você mesmo " Desenhe uma linha
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); Tente você mesmo " Desenhar um círculo
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke(); Tente você mesmo " Desenhar um texto
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50); Tente você mesmo " acidente vascular cerebral Texto
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50); Tente você mesmo " Desenhe Gradiente Linear
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); Tente você mesmo " Desenhar circular Gradiente
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); Tente você mesmo " Desenhe imagem
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10); Tente você mesmo " HTML Canvas Tutorial
Para saber tudo sobre HTML <canvas> , Visite o nosso pleno HTML Canvas Tutorial .