Canvas HTML5
- Página Anterior Atributos de Formulário de Entrada HTML
- Próxima Página HTML5 SVG
O elemento canvas é usado para desenhar gráficos na página da web.
O que é Canvas?
O elemento canvas do HTML5 usa JavaScript para desenhar imagens na página da web.
A área de desenho é uma região retangular, onde você pode controlar cada pixel.
O canvas possui várias métodos de desenho de caminhos, retângulos, círculos, caracteres e adição de imagens.
Criar o elemento Canvas
Adicionar o elemento canvas à página HTML5.
Definir o id, largura e altura do elemento:
<canvas id="myCanvas" width="200" height="100"></canvas>
Desenhar através do JavaScript
O elemento canvas em si não possui capacidade de desenho. Todas as operações de desenho devem ser realizadas internamente no JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript usa o id para encontrar o elemento canvas:
var c=document.getElementById("myCanvas");
Em seguida, crie o objeto context:
var cxt=c.getContext("2d");
O objeto getContext("2d") é um objeto HTML5 integrado, que possui várias métodos para desenhar caminhos, retângulos, círculos, caracteres e adicionar imagens.
As duas linhas de código abaixo desenham um retângulo vermelho:
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
O método fillStyle o tingiu de vermelho, o método fillRect definiu a forma, posição e tamanho.
Entendendo as Coordenadas
O método fillRect acima possui os parâmetros (0,0,150,75).
Isso significa: desenhe um retângulo de 150x75 na folha, começando no canto superior esquerdo (0,0).
Como mostrado na figura a seguir, as coordenadas X e Y da folha são usadas para localizar o desenho na folha.
Exemplo: Coloque o mouse sobre o retângulo para ver as coordenadas
Mais Exemplos de Canvas
Abaixo estão mais exemplos de desenho no elemento canvas:
Exemplo - Linha
Desenhe uma linha especificando onde começar e onde terminar:
Código JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
Elemento canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Seu navegador não suporta o elemento canvas. </canvas>
Exemplo - Círculo
Desenhe um círculo definindo o tamanho, cor e posição:
Código JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
Elemento canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Seu navegador não suporta o elemento canvas. </canvas>
Exemplo - Gradiente
Desenhe o fundo de gradiente usando a cor especificada:
Código JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
Elemento canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Seu navegador não suporta o elemento canvas. </canvas>
Exemplo - Imagem
Coloque uma imagem no canvas:
Código JavaScript:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
</script>
Elemento canvas:
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"> Seu navegador não suporta a tag HTML5 canvas. </canvas>
Tutorial do Canvas HTML
Para aprender mais sobre o canvas, acesse nosso Tutorial do Canvas HTML.
Páginas Relacionadas
Manual de Referência:Tag <canvas> HTML 5
Manual de Referência:Objeto Canvas do DOM HTML
- Página Anterior Atributos de Formulário de Entrada HTML
- Próxima Página HTML5 SVG
