Criando um relógio no estilo iOS usando o canvas

Acabamento final

Sinalizando o dia e a noite através da cor do relógio

A última implementação do nosso relógio será indicar o dia e a noite através da cor do relógio. Depois de criar o relógio, animar os ponteiros e sincronizá-lo com o relógio do computador, adicionar esta identificação de dia/noite se torna o processo mais fácil.

Nosso relógio ficará com esta aparência de dia e à noite:

Para implementar esta modificação, vamos criar alguns parâmetros de cores que já foram definidos dentro das funções que desenham o relógio, e montar uma verificação simples dentro da função incrementSecond() para identificar se o horário é igual ou maior que 18 horas e menor ou igual a 6 horas da manhã. Ou seja, não estamos trabalhando com fusos horários. A implementação ainda é simples. Vamos ao código:

Nas linhas 145 a 149 se encontra o escopo da função de incremento do segundo. Verifique na linha 148 a condição que acabamos de explicar como aplicar. No nosso caso, verificamos se as horas é maior ou igual a 18 e menor ou igual a 6 horas. Caso satisfeita a condição, chamamos um procedimento auxiliar que é encarregado para atualizar o relógio. Nele apenas atualizamos algumas variáveis de cores que já estavam definidas para o dia, trocando os valores para cores mais escuras, sinalizando o horário noturno.

Você também pode criar sua própria função para atualizar o tema do relógio ao anoitecer, com funções setInterval e setTimeOut. Todo e qualquer animação ganha uma suavidade se você inventar efeitos como "fade", "slide" e etc. No fonte completo implementamos um "fade" simples, para animar nosso relógio para o tema black igual do iOS quando anoitece. Verifique o código fonte completo. Ele contém tudo que vimos até aqui.

Espero que este post tenha ajudado a dar os primeiros passos com o canvas do HTML5.

PARTE 1: INTRODUÇÃO AO CANVAS

PARTE 2: DESENHANDO OS ELEMENTOS DO RELÓGIO

PARTE 3: ADICIONANDO MOVIMENTO AOS PONTEIROS

PARTE 4: FINALIZANDO O PROJETO

Acompanhe-nos no Twitter para ser avisado sobre novos conteúdos.