 |
|
||||
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: 790 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:
<!doctype html>
<html>
<head>
<title>O objeto Canvas do JavaScript</title>
</head>
<body>
<Canvas id="canvas" width="500" height="200"></Canvas>
<script type="text/javascript">
// obtemos uma referência ao elemento Canvas
var canvas = document.getElementById("canvas");
// obtemos o contexto de desenho
var contexto = canvas.getContext("2d");
// função que exibe o relógio digital
function exibir_relogio(){
// obtemos a hora atual já formatada
var agora = new Date();
var horas = agora.toLocaleTimeString();
// limpamos o canvas
contexto.clearRect(0, 0, canvas.width, canvas.height);
// e desenhamos o relógio mais uma vez
contexto.font = "60pt calibri";
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 |
