Uso da tag canvas do HTML5 com JavaScript

A tag CANVAS é basicamente uma tela para desenho.

 

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

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

Seu navegador não suporta HTML5

Fonte: developer.mozilla.org

Deixe uma resposta

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