O que é uma imagem de relógio digital?

Um relógio digital exibe a hora em algarismos, em vez de ponteiros sobre um mostrador, como fazem os despertadores, micro-ondas e placares. Esta ferramenta reproduz esse visual como uma imagem que pode ser baixada, usando fontes reais já instaladas no seu navegador em vez de uma fonte desenhada de forma personalizada, para que os algarismos permaneçam nítidos e consistentes com o que você vê na tela.

Descrição da ferramenta

Defina as horas, os minutos e os segundos ou obtenha a hora atual com um clique. Em seguida, escolha o formato de 12 ou 24 horas e se deseja exibir os segundos. Escolha uma fonte e o tamanho da fonte, ative ou desative um brilho no estilo LED e ajuste sua intensidade. Defina também uma cor de fundo opcional e uma cor para os algarismos; depois, baixe o resultado como PNG ou JPG.

Recursos

  • Defina quaisquer horas, minutos e segundos ou preencha instantaneamente a hora atual
  • Formato de 12 horas com indicação AM/PM ou formato de 24 horas
  • Ative ou desative a exibição dos segundos
  • Escolha entre fontes monoespaçadas e fontes do sistema, para que a pré-visualização corresponda sempre ao arquivo baixado
  • Brilho opcional com intensidade ajustável, para um visual realista de LED ou despertador
  • Fundo opcional, para que você possa exportar os algarismos sobre um fundo transparente
  • Cor de fundo, cor dos algarismos e tamanho da fonte personalizáveis
  • Baixe como PNG ou JPG ou imprima com resolução de até 3x

Como funciona

A hora é renderizada como texto simples na fonte escolhida, com numerais tabulares para que cada algarismo ocupe a mesma largura. Como fontes diferentes posicionam seus glifos de maneiras distintas em relação à própria linha de base e às margens laterais, a ferramenta mede a área efetivamente renderizada de cada fonte com a API TextMetrics do Canvas e ajusta a posição do texto para que ele permaneça centralizado no painel, independentemente da fonte selecionada. O brilho é um text-shadow atrás dos algarismos, imitando a forma como um visor LED real espalha luz sobre sua estrutura; desative-o para obter um visual plano e limpo. Como o visor é criado com fontes que o navegador já tem instaladas, em vez de uma fonte personalizada incorporada, a imagem baixada sempre terá exatamente a mesma aparência da pré-visualização.

Dicas

  • Ative o brilho com um fundo escuro e uma cor vermelha ou verde para obter um visual realista de despertador ou placar.
  • Desative o fundo para criar um PNG transparente que você possa inserir em outro design.
  • Desative “Exibir segundos” para obter uma exibição de hora mais limpa em duas partes, por exemplo, em um gráfico de relógio de parede ou em uma miniatura.
  • Aumente o tamanho da fonte para uma imagem grande no estilo de banner ou mantenha-o pequeno para usar como ícone ou origem de favicon.