Tutorial simples: Formas básicas do canvas no html5

No html5 apareceu a tag <canvas>, com ela é possivel desenhar com código javascript, e até animar o desenho.

Como sou péssimo para desenhar resolvi experimentar com o canvas quando tive que fazer um ícone para a extensão de utf-8 que fiz para o Google Chrome, na documentação dizia que o ícone podia ser em canvas (é bom para extensões que mostram algum movimento no ícone), então vamos nessa ⚡

O ícone da extensão envolve os 3 principais e mais simples elementos, um retângulo, um círculo e texto.

Tudo começa com um arquivo html:

Canvas tutorial



Mas assim ele não faz nada, precisa executar ao carregar a página, para isso é necessário um pouquinho de javascript. Um template para começar um canvas ficaria assim:





A forma mais básica é o retângulo, prático para demarcar o tamanho do desenho.





retangulo em canvas

O canvas só suporta diretamente retângulos e texto, para o resto é necessário um “path”, usamos beginPath() para iniciar e closePath() para terminar, só então dá pra desenhar com o stroke() ou o fill().

function draw(){
var canvas = document.getElementById('icon');
if (canvas.getContext){
var context = canvas.getContext('2d');

//retangulo
context.strokeStyle = "red";
context.strokeRect(0,0,128,128);

//circulo
context.fillStyle = "rgba(241, 178, 21, 0.3)";
context.strokeStyle = "blue";
context.beginPath();
var x = 64; // = 128/2 - centraliza o circulo
var y = 64;
var radius = 64; //raio do circulo = diametro/2
var anticlockwise = true;
var startAngle = 0; //inicia o arco na posição 0 graus (direita)
var endAngle = Math.PI*2; //termina o arco na posição 360 graus (volta completa)
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
context.closePath();
context.stroke(); //desenha a borda
context.fill(); //preenche

}
}


circulo em canvas

Como a extensão que eu estava fazendo envolvia caracteres utf-8, resolvi economizar no desenho e usar uma estrela em utf mesmo.





texto em canvas

Repare que além dos métodos para incluir o texto na imagem foi necessário incluir “<meta charset=”utf-8″>” para o caracter aparecer corretamente.

Só que ficou meio normal demais esse ícone. ¿Que tal brincar um pouco com os ângulos do arc?

//texto
context.strokeStyle = "rgba(2, 93, 198, 1)";
context.fillStyle = "rgba(2, 93, 198, 0.9)";
context.font = "italic bold 146px sans-serif";
context.fillText("✪", 3, 117);

//circulo
context.fillStyle = "rgba(241, 178, 21, 0.3)";
context.beginPath();
var startAngle = (Math.PI * 3.78) / 2; //comeca um pouco acima do 0
var endAngle = Math.PI + (Math.PI * 3.42) / 2; //termina no sudoeste
context.arc(64, 64, 64, startAngle, endAngle, true);
context.closePath();
context.fill();

angulos em canvas

Tá, mas até agora o desenho só apareceu no navegador, se tentar salvar vai baixar o fonte e não a imagem! Para criar um png do canvas o método é canvas.toDataURL()

//texto
context.strokeStyle = "rgba(2, 93, 198, 1)";
context.fillStyle = "rgba(2, 93, 198, 0.9)";
context.font = 'italic bold 146px sans-serif';
context.fillText("✪", 3, 117);
//circulo
context.fillStyle = "rgba(241, 178, 21, 0.3)";
context.beginPath();
var startAngle = (Math.PI*3.78)/2;
var endAngle = Math.PI+(Math.PI*3.42)/2;
context.arc(64,64,64,startAngle,endAngle,true);
context.closePath();
context.fill();

//criar imagem png
window.open(canvas.toDataURL());

Vai tentar abrir um popup, não esqueça de liberar.

Por hoje é só pessoal!!

Para saber mais sobre canvas:
https://developer.mozilla.org/en/Canvas_tutorial

Se tiver curiosidade segue o link para a extensão utf-8:
Firefox: https://addons.mozilla.org/en-US/firefox/addon/242192/
Chrome: https://chrome.google.com/extensions/detail/fcemphgmjnjpmmdhcedhjiegickfbiia


Publicado

em

por

Comentários

Uma resposta para “Tutorial simples: Formas básicas do canvas no html5”

  1. […] feito com o Canvas 2D Context pode ser feito com outros métodos (SVG, WebGL, CSS3). Exemplo em: http://codexico.com.br/blog/html5/tutorial-simples-formas-basicas-do-canvas-no-html5/ 5. Tipos de Dados Binários Javascript nasceu para fazer validação textual em formulários. No […]

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *