Depois de muito tempo longe de JavaScript, eu voltei a trabalhar com tecnologia(2010), tudo por conta da do tão temido HTML5. Recentemente comecei a fazer experimentos de Canvas HTML5 com ajuda do meu colega Leo(@leonardomarciel).
Algo inicialmente trabalhoso criar os elementos do zero via código e acabei descobrindo um framework bastante legal depois de algumas pesquisas.
Canvas API
A Canvas API fornece maneiras de desenhar gráficos via JavaScript e via elemento HTML <canvas>. Com essa API podemos realizar animações, gráficos para jogos, visualização de dados, manipulação de fotos e processamento de vídeo em tempo real.
A Canvas API foca amplamente em gráficos 2D. A WebGL API, que também usa o elemento <canvas>. Canvas é uma tag que permite desenhar gráficos bitmap através da linguagem JavaScript, canvas faz parte das novas especificações do HTML (HTML5) mais informações aqui:
http://www.whatwg.org/specs/web-apps/current-work/
Os melhores navegadores do mercado Chome, Firefox, Opera e Safari dão suporte a Canvas HTML5. Atualmente (novembro de 2022) o suporte de canvas HTML5 é de quase 99% dos navegadores:
Como trabalhar com Canvas HTML5
Onde passamos o id do canvas HTML5 para futuramente fazer referência como um elemento HTML normal e as propriedades largura e altura, se essas propriedades de largura e altura não forem definidas elas assumem os valores 300px de largura por 150 px de altura. Também podemos definir a largura e altura por CSS, mas corremos o risco de distorcer a imagem gerada pelo canvas.
Para fazer o tratamento nesse caso incluímos na tag canvas HTML5 o nosso conteúdo alternativo. No momento que o browser não der suporte, ele irá ignorar a tag e ler o conteúdo seguinte.
<canvas id="meucanvas">
Se o browser não tiver suporte irá exibir esse texto.
</canvas>Code language: HTML, XML (xml)Esse texto na tag aparecerá se o navegador não der suporte, na tag também podemos colocar imagens como conteúdo alternativo ou até um elemento.
function init(){
//acessando nosso elemento canvas
var canvas = document.getElementById("meucanvas");
//definindo o contexto
var ctx = canvas.getContext("2d");
}
Code language: JavaScript (javascript)Para fazer um tratamento exibindo um alerta para o usuário caso o browser não tenha suporte a canvas fazemos da seguinte forma:
function init(){
var canvas = document.getElementById("meucanvas");
if(canvas.getContext){
var ctx = canvas.getContext('2d');
}else{
window.alert("desculpe seu browser não tem suporte a canvas, por favor instale um navegador descente.");
}
}
Code language: JavaScript (javascript)Agora que temos o todo o tratamento para o canvas vamos criar uma forma primitiva. Anteriormente só tinha exibido trechos do meu código HTML, dessa vez vou mostrar como o todo o esquema ficaria.
<script type="application/javascript">
function init(){
//acessando nosso elemento pelo id
var canvas = document.getElementById("meucanvas");
// utilizando uma condicional caso o browser não
//tenha suporte
if(canvas.getContext){
var ctx = canvas.getContext("2d");
// definindo o preenchimento
// passamos como paramentro as cores rgb
ctx.fillStyle = "rgb(0,200,0)";
//desenhando um quadrado
//definimos os valores (x, y, largura, altura)
ctx.fillRect(40,40, 80 , 80 );
}else{
window.alert("desculpe seu browser não tem suporte a canvas, por favor instale um navegador descente.");
}
}
</script>
<canvas id="meucanvas" width="200" height="200"> </canvas>Code language: HTML, XML (xml)Na linha que passo o preenchimento fillStyle posso passar outro mais um parâmetro na chamada da função rgba(200,0,0,0.5) onde passo as três cores dos padrões rgb e opacidade do elemento(alpha).
Outra opção é passar um código hexadecimal como parâmetro na função fillStyle, por exemplo, fillStylle("#00CC00").
Para mais conteúdo relacionado a desenvolvimento front-end confira os posts relacionados:
Deixe um comentário