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.
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
}
}
Como a extensão que eu estava fazendo envolvia caracteres utf-8, resolvi economizar no desenho e usar uma estrela em utf mesmo.
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();
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
Deixe um comentário