 |
|
Você está aqui: HTML5 ::: HTML5 + JavaScript ::: Animação, Animações, Técnicas de Animação |
|
Como criar um relógio digital usando o Canvas do HTML5 e as funções fillText() e requestAnimationFrame()Quantidade de visualizações: 853 vezes |
|
|
Nesta dica nós vamos avançar um pouco mais no nosso Curso de Criação de Jogos em HTML5. Para isso nós vamos tirar proveito das funções fillText() e requestAnimationFrame() para criar um relógio digital na superfície do Canvas. Este relógio atualiza o tempo todo, mostrando as horas em tempo real. Comece analisando a imagem a seguir:  Agora vamos ao código. Veja a página HTML completa, incluindo o código JavaScript para a animação:
Para obter as horas formatadas de acordo com as configurações regionais do nosso computador nós fazemos uso da função toLocaleTimeString() do objeto Date. Note o uso da função clearRect() para limpar o Canvas. Em seguida nós definimos a fonte e a cor a ser usada no texto usando as propriedades font e fillStyle. Finalmente nós usamos a função fillText() para escrever o texto representando a hora atualizada na superfície do Canvas. Para finalizar, nós usamos a função requestAnimationFrame() para atualizar a janela de desenho constantemente, na taxa de 60 frames por segundo. Em outras dicas de HTML5 eu mostro como você pode controlar essa taxa de atualização. |
|
 Link para compartilhar na Internet ou com seus amigos: |
|
Veja mais Dicas e truques de HTML5 |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
