JSFiddle - React, Tailwind, and code Playground
HTML
<div id="relogio">
</div>
JavaScript
var geraFundo = (function() {
var fundo = document.createElement('canvas');
fundo.width = fundo.height = 150;
var ctx = fundo.getContext('2d');
//define o tipo de linha
ctx.strokeStyle = "black";
ctx.lineWidth = 3;
//começa a desenhar
ctx.beginPath();
//círculo externo
ctx.arc(75,75,70,0,Math.PI*2,true);
//move a origem para o centro da imagem
ctx.translate(75,75);
//desenha os minutos todos
for( var i=0;i<60;i++ ) {
ctx.save();
ctx.rotate( (i/60) * (Math.PI*2) ); //roda
ctx.moveTo(0,-70); //move para o bordo do circulo
ctx.lineTo(0, -65); //desenha para dentro
ctx.restore();
}
//desenha as marcas de cada hora um pouco maiores
for( var i=0;i<60;i+=5 ) {
ctx.save();
ctx.rotate( (i/60) * (Math.PI*2) );//roda
ctx.moveTo(0,-70); //move para o bordo do circulo
ctx.lineTo(0, -60); //desenha para dentro
ctx.restore();
}
ctx.stroke(); //desenha tudo
return fundo;
});
var criaRelogio = (function() {
var relogio = document.createElement('canvas'); //cria o canvas do relógio
relogio.width = relogio.height = 150; //marca a largura e altura
var ctx = relogio.getContext('2d'); //obtem contexto de desenho
document.getElementById('relogio').appendChild(relogio); //adiciona ao div
var fundo = geraFundo(); //obtem o fundo do relógio que nunca muda
//função para desenhar que aproveita os dados privados
var desenhar = (function(){
//limpa
ctx.clearRect(0,0 , 150, 150);
//desenha o fundo
ctx.drawImage(fundo, 0, 0);
//desenha os ponteiros
var tempo = new Date();
var h = (tempo.getHours()>12)?tempo.getHours()-12:tempo.getHours();
var m = tempo.getMinutes();
var s = tempo.getSeconds();
var h_ajustado = h + (m/60);
var m_ajustado = m +(s/60);
//var...