Este artigo apresenta como desenhar um relógio na tela e compartilha com todos. Os detalhes são os seguintes:
A renderização é
Código acima:
var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');var ano,mês,dia,hora,segundo,minuto;//Desenhe a função de discagem drawClockPie(){ ctx.beginPath ( ); ctx.lineWidth = 2; ctx.arc(150,150,146,0,2*Math.PI); ctx.closePath(); ctx.fillStyle = 'vermelho'; Função de escala drawClockHours(){ ao desenhar *Math.PI ctx.beginPath(); '#333'; ctx.moveTo(0,-140); ctx.lineTo(0,-125); drawClockMins(){ for(var i = 0,l = 60; i < 60; i++){ ctx.save(); ctx.translate(150,150); ,-140); ctx.closePath(); ctx.restore();// Desenhar função de ponteiro de hora drawHourPin(){ ctx.save(); 60 +segundo)/(12*60*60)*2*Math.PI); ctx.strokeStyle = '#333'; );}// Desenhar o ponteiro dos minutos function drawMinPin(){ ctx.save(); ctx.translate(150,150); = 2;ctx.moveTo(0,0); ctx.stroke(); ctx.closePath(); ctx.restore();}// Desenha a função de segunda mão drawSecPin(){ ctx.save(); *2 *Math.PI); ctx.beginPath(); = 1; ctx.moveTo(0,0); ctx.lineTo(0,-80); { hora = hora >= 12 ? hora - 12 : hora var time = 'Agora é' + ano + 'ano' + mês + 'mês' + dia + 'dia' + hora + 'hora' + minuto + 'minuto' + segundo + 'segundo'; (); ano = data.getFullYear(); mês = data.getMonth() + 1 dia = data.getDate(); date.getHours(); minuto = date.getMinutes(); segundo = date.getSeconds();}setInterval(function(){ ctx.clearRect(0,0,600,600); drawClockPie(); drawClockHours(); drawClockMins(); getTimes(); drawText(); drawHourPin(); drawSecPin();},1000); Observação:É claro que o tempo não precisa ser obtido a cada segundo, mas pode ser obtido diretamente uma vez e incrementado em segundos.
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.