Edgard Leal

My personal blog hosted on Github using Jekyll

Home View on GitHub
18 January 2013

A tag CANVAS é basicamente uma tela para desenho.

  

Menasgem para quando o navegador não suportar HTML5

 

Com o JavaScript pode-se obter a tela, dai será nescessário um objeto Context para desenhar nesta tela:

  var canvas = document.getElementById('canvas1');
var context = canvas.getContext('2d');
context.moveTo(0,0);
context.lineTo(50,50);
context.stroke();

Resultado:

Principais funções:
 
moveTo(int x, int y);   //Move para as cordenadas indicadas

lineTo(int x, int y); //Desenha uma linhas do ponto inicial definido por "moveTo" ate o pondo indicado nos valores de X e Y

stroke(); //Imprime o senho na tela
 
fillRect(int x, int y, int width, int height); //Desenha um retângulo, onde X e Y indica o posicionamento e Width e Height indicam o tamanho do retângulo
 
arc(int x, int y, int radius,double start, double end); //Desenha um arco onde X e Y indica o posicionamento do centro do arco, Radius é o raio , Start indica onde o arco deve iniciar, o valor 0(zero) é a posiçao de 3(três) horas no relógio e vai ate Math.PI (3.14), End é o fim do arco, desta forma para desenhar um círculo, usa-se 0 para Start e 3.14 (Math.PI) para End

Abaixo você pode ver um exemplo de uma animação que renderiza um relogio em uma tag <CANVAS>

Seu navegador não suporta HTML5

Fonte: developer.mozilla.org



blog comments powered by Disqus