Efecto de reloj circular en Canvas con js

Este ejemplo muestra el código específico de implementación del reloj circular Canvas en JavaScript, a modo de referencia. A continuación, se detalla el contenido:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <título>Reloj de Canvas</título>
    <style type="text/css">
      div{
        texto-alineación: centro;
        margen-top: 250px;
      }
      #reloj{
        borde: 1px sólido #ccc;
      }
    </<estilo>
  </<cabecera>
  <cuerpo>
    <div>
      <lienzo id="reloj" altura="200px" ancho="200px"></lienzo>
    </div>
    <script type="text/javascript" src="js/reloj.js"></script>
  </cuerpo>
</html>

var dom=document.getElementById('reloj');
var cxt=dom.obtenerContexto("2d);
var ancho=cxt.canvas.ancho;
var altura=cxt.canvas.altura;
var r=ancho/2;
function dibujarFondo(){
  cxt.save();
  cxt.translate(r,r);
  cxt.beginPath();
  cxt.anchoLinea=10;
  cxt.arc(0,0,r-5,0,2*Math.PI,false);
  cxt.dibujarLinea();
  cxt.tipoLetra="18px Arial";
  cxt.alineacionTexto='centro'
  cxt.baselineTexto='medio'
  var hourNums=[3,4,5,6,7,8,9,10,11,12,1,2);
  hourNums.forEach(function(number,i){
    var rad=2*Math.PI/12*i;
    var x=Math.cos(rad)*(r-30);
    var y=Math.sin(rad)*(r-30);
    cxt.escribirTexto(number,x,y);
  });
  for(var i=0;i<60;i++);
    var rad=2*Math.PI/60*i;
    var x=Math.cos(rad)*(r-18);
    var y=Math.sin(rad)*(r-18);
    cxt.beginPath();
    if(i % 5===0){
      cxt.colorRelleno="#000"
      cxt.arc(x,y,2,0,2*Math.PI,false);
    }
    else{
      cxt.colorRelleno="#ccc"
      cxt.arc(x,y,2,0,2*Math.PI,false);
    }
    cxt.fill(); 
  }
}
function dibujarHora(hora,minuto){
  cxt.save();
  cxt.beginPath();
  var rad=2*Math.PI/12*hora;
  var mrad=2*Math.PI/12/60*minuto
  cxt.girar(rad+mrad);
  cxt.anchoLinea=6;
  cxt.puntaLinea='redondeada'
  cxt.moverAPunto(0,10);
  cxt.líneaHasta(0,-r/2);
  cxt.dibujarLinea();
  cxt.restore();
}
function dibujarMinuto(minuto){
  cxt.save();
  cxt.beginPath();
  var rad=2*Math.PI/60*minuto;
  cxt.rotate(rad);
  cxt.anchoLinea=3;
  cxt.puntaLinea='redondeada'
  cxt.moverAPunto(0,10);
  cxt.líneaHasta(0,-r+30);
  cxt.dibujarLinea();
  cxt.restore();
}
function dibujarSegundo(segundo){
  cxt.save();
  cxt.beginPath();
  cxt.fillStyle='#c14543'
  var rad=2*Math.PI/60*second;
  cxt.rotate(rad);  
  cxt.moveTo(-2,20);
  cxt.lineTo(2,20);
  cxt.lineTo(1,-r+18);
  cxt.lineTo(-1,-r+18);
  cxt.fill();
  cxt.restore();
}
function drawDot(){
  cxt.beginPath();
  cxt.fillStyle='#fff'
  cxt.arc(0,0,3,0,2*Math.PI,false);
  cxt.fill();
}
function draw(){
  cxt.clearRect(0,0,width,height);
  var now=new Date();
  var hour=now.getHours();
  var minute=now.getMinutes();
  var second=now.getSeconds();
  drawBackground();
  drawHour(hour,minute);
  drawMinute(minute);
  drawSecond(second);
  drawDot();
  cxt.restore();
}

setInterval(draw,1000);

Esto es todo el contenido del artículo, espero que ayude a su aprendizaje y que todos apoyen a la tutorial de grito.

Aviso: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido ha sido contribuido y subido por los usuarios de Internet, este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @ para denunciar y proporcione evidencia relevante. Una vez confirmada, este sitio eliminará inmediatamente el contenido sospechoso de infracción de derechos de autor.)

Tutoriales básicos

Te gustará