 |
|
||||
 Planilha Web - Planilhas e Calculadoras online para estudantes e profissionais de Engenharia Civil, Engenharia Elétrica e Engenharia Mecânica. |
|||||
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: 1006 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: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!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";
contexto.fillStyle = "blue";
contexto.fillText(horas, 50, 100);
// e fazemos uma nova chamada à função
// exibir_relogio()
window.requestAnimationFrame(exibir_relogio);
}
// fazemos a primeira chamada à função
// exibir_relogio()
window.requestAnimationFrame(exibir_relogio);
</script>
</body>
</html>
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 |
