Cómo dibujar un reloj sobre lienzo.

Este artículo presenta cómo dibujar un reloj sobre lienzo y lo comparte con todos. Los detalles son los siguientes:

La representación es

Código anterior:

 var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');var año,mes,día,hora,segundo,minuto;// Dibujar la función de marcado drawClockPie(){ ctx.beginPath ( ); ctx.lineWidth = 2; ctx.strokeStyle = '#333'; ctx.arc(150,150,146,0,2*Math.PI); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.fillStyle = 'rojo'; ctx.fill(); ctx.closePath();}// Función de escala drawClockHours(){ al dibujar *Math.PI ctx.beginPath(); '#333'; ctx.moveTo(0,-140); ctx.lineTo(0,-125); ctx.stroke(); ctx.closePath(); drawClockMins(){ for(var i = 0,l = 60; i < 60; i++){ ctx.save(); ctx.translate(150,150); ctx.rotate(i*1/60*2*Math.PI); ctx.beginPath(); ctx.lineWidth = 3; ctx.strokeStyle = '#333'; ,-140); ctx.lineTo(0,-133); ctx.closePath(); ctx.restore(); }}// Función de dibujo de manecilla de hora drawHourPin(){ ctx.save(); ctx.translate(150,150) 60 +segundo)/(12*60*60)*2*Math.PI ctx.beginPath(); ctx.strokeStyle = '#333'; ctx.lineWidth = 3; ctx.moveTo(0,0); ctx.lineTo(0,-40); );}// Función de dibujo del minutero drawMinPin(){ ctx.save(); ctx.translate(150,150); ctx.rotate((minuto*60+segundo)/(60*60)*2*Math.PI); ctx.beginPath(); = 2; ctx.moveTo(0,0); ctx.lineTo(0,-60); ctx.stroke(); ctx.closePath(); ctx.restore();}// Dibujar la función de segunda mano drawSecPin(){ ctx.save(); *2 *Math.PI); ctx.beginPath(); ctx.strokeStyle = 'rojo'; = 1; ctx.moveTo(0,0); ctx.lineTo(0,-80); ctx.closePath();}// Función de texto de tiempo de dibujo drawText(); { hora = hora >= 12 ? hora - 12 : hora var = 'Ahora es' + año + 'año' + mes + 'mes' + día + 'día' + hora + 'hora' + minuto + 'minuto' + segundo + 'segundo'; ctx.font = '15px negrita'; ctx.fillText(time,24,350);}// Obtener función de hora getTimes(){ var fecha = nueva fecha (); año = fecha.getFullYear(); mes = fecha.getMonth() + 1 día = fecha.getDate(); date.getHours(); minuto = date.getMinutes(); segundo = date.getSeconds();}setInterval(function(){ ctx.clearRect(0,0,600,600); drawClockPie(); drawClockHours(); drawClockMins(); getTimes(); dibujarTexto(); dibujarHoraPin(); dibujarMinPin(); dibujarSecPin();},1000);

Por supuesto, no es necesario obtener el tiempo cada segundo, sino que se puede obtener directamente una vez e incrementarlo en segundos.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.