HTML5 - Canvas API
- Posted: May 08, 2012 at 11:42 AM
- 4,841 Views
- 20 Comments
CANVAS API
O elemento canvas
A Canvas API permite a você desenhar na tela do navegador via Javascript. O único elemento HTML existente para isso é o elemento canvas, o resto todo é feito via Javascript. Veja como inserir o elemento canvas numa página:
<canvas id="x" width="300" height="300"></canvas>
Isso vai exibir um retângulo vazio. Para desenhar nele, primeiro obtemos o contexto de desenho, com Javascript:
context=document.getElementById('x').getContext('2d')
Agora que temos um contexto, podemos desenhar nele. Vamos começar com um simples retângulo:
context.fillRect(10, 10, 50, 150)
Simples, não? Que tal tentarmos algo um pouco mais complexo? Dê uma olhada no exemplo:
<!DOCTYPE html>
<html>
<head>
<metacharset=”UTF-8” />
<title>Canvas API</title>
</head>
<body>
<canvasid=”x” width=”300” height=”300”></canvas>
<button onclick=”desenhar()”>desenhar</button>
<script>
function desenhar(){
// Obtemos o contexto
context=document.getElementById(‘x’).getContext(‘2d’)
//Iniciamos um novo desenho
context.beginPath()
//Movemos a caneta para o inicio do desenho
context.moveTo(150,50)
//Desenhamos as linhas
context.lineTo(220,250)
context.lineTo(50,125)
context.lineTo(250,125)
context.lineTo(80,250)
context.lineTo(150,50)
//O desenho não é de verdade enquanto você
//não mandar o contexto pintá-lo.
//Vamos pintar o interior de amarelo
context.fillStyle=’#ff0’
context.fill()
//Vamos pintar as linhas de vermelho.
context.strokeStyle=’#f00’
context.stroke()
}
</script>
</body>
</html>E veja o que acontece quando se clica no botão:
Há muito mais para você estudar se quiser se aprofundar na Canvas API. Apenas para que você tenha uma idéia, é possível desenhar texto, sombras, gradientes, incluir imagens no canvas, manipular os pixels, rotacionar e transformar os objetos.
Canvas e SVG Uma dúvida muito comum é quando usar Canvas, quando usar SVG. Para saber escolher, é preciso entender as diferenças entre um e outro. SVG é vetorial, e baseado em XML, logo, acessível via DOM. Canvas é desenhado pixel a pixel, via Javascript.
Assim, as vantagens do SVG são:
- O conteúdo é acessível a leitores de tela
- O gráfico é escalável, não perde resolução ou serrilha ao redimensionar
- O conteúdo é acessível via DOM
E as vantagens do Canvas:
- A performance é muito superior ao SVG na maioria dos casos
- É fácil desenhar via Javascript. Em SVG, é preciso fazer seu script escrever XML para você. Com Canvas você só manda desenhar, e pronto.
Este treinamento faz parte do Microsoft Virtual Academy: http://www.microsoftvirtualacademy.com
Comment on the Post
Already have a Channel 9 account? Please sign in
Follow the Discussion
Oops, something didn't work.
What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in. You need to be signed in to Channel 9 to use this feature.What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in and view them all on your notifications page.sign up for email notifications?
Show!
muito louco esse canvas!
O Canvas é bem melhor q o anterior
Canvas \o/
Estranho no meu Chrome não está entendendo a linguagem e assim, meu browser não me mostra nada! Será que devo utilizar algum outro?
Cavas muito bom vó largar o flex de vez!
Para funcionar no Firefox 16 foi necessário especificar o tipo de script na tag <script>, deste modo:
<script type="text/javascript">
Sem isso, não funcionou.
Também não dá para esquecer de substituir as aspas inclinadas por caracteres ASCII.
Meu código funcionou assim:
<canvas id="x" width="300" height="300"></canvas>
<script type="text/javascript">
function desenhar(){
// Obtemos o contexto
context=document.getElementById('x').getContext('2d');
//Iniciamos um novo desenho
context.beginPath();
//Movemos a caneta para o inicio do desenho
context.moveTo(150,50);
//Desenhamos as linhas
context.lineTo(220,250);
context.lineTo(50,125);
context.lineTo(250,125);
context.lineTo(80,250);
context.lineTo(150,50);
//O desenho não é de verdade enquanto você
//não mandar o contexto pintá-lo.
//Vamos pintar o interior de amarelo
context.fillStyle='#ff0';
context.fill();
//Vamos pintar as linhas de vermelho.
context.strokeStyle='#f00';
context.stroke();
}
</script>
show
Nada disso funcionou comigo!
Nada funcionou comigo também.
Acho que poderiam postar quais navegadores funcionam em qual aula...
Microsoft o IE 9 não funciona isso! Aceitem por favor :/
Não funcionou em nenhum dos códigos. Sem a especificação de script apenas aparece o botão desenhar, mas quando clico não mostra nada. Ao especificar como javascript, não mostra nada...
Agora sim com a declaração do text/javascript e a correção das aspas
Segue o código
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas API</title>
</head>
<body>
<canvas id="x" width="300" height="300"></canvas>
<button onclick="desenhar()">desenhar</button>
<script type="text/javascript">
function desenhar(){
// Obtemos o contexto
context=document.getElementById('x').getContext('2d')
//Iniciamos um novo desenho
context.beginPath()
//Movemos a caneta para o inicio do desenho
context.moveTo(150,50)
//Desenhamos as linhas
context.lineTo(220,250)
context.lineTo(50,125)
context.lineTo(250,125)
context.lineTo(80,250)
context.lineTo(150,50)
//O desenho não é de verdade enquanto você
//não mandar o contexto pintá-lo.
//Vamos pintar o interior de amarelo
context.fillStyle='#ff0'
context.fill()
//Vamos pintar as linhas de vermelho.
context.strokeStyle='#f00'
context.stroke()
}
</script>
</body>
</html>
Basta trocar as aspas e o código funciona. Não é necessário o uso do script "<script type="text/javascript">"
Com certeza , canvas é bem melhor!!!
viva canvas _o/ muito show
Legal como faríamos pra permitir desenho livre como no paint?
alguém sabe ou seja desenhar com o mouse na tela...
FAIL de novo !!
IE? =/
show de bola
Remove this comment
Remove this thread
close