Effet de cadran solaire circulaire dessiné avec Canvas en js

Ce exemple partage avec vous l'implémentation détaillée du cadran circulaire Canvas en JavaScript, pour votre référence, voici le contenu détaillé

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Horloge Canvas</title>
    <style type="text/css">
      div{
        texte-align: center;
        marge-top: 250px;
      }
      #clock{
        border: 1px solid #ccc;
      }
    </<style>
  </<head>
  <body>
    <div>
      <canvas id="clock" height="200px" width="200px"></canvas>
    </div>
    <script type="text/javascript" src="js/clock.js"></script>
  </body>
</html>

var dom=document.getElementById('clock');
var cxt=dom.getContext("2d");
var width=cxt.canvas.width;
var height=cxt.canvas.height;
var r=width/2;
function drawBackground(){
  cxt.save();
  cxt.translate(r,r);
  cxt.beginPath();
  cxt.lineWidth=10;
  cxt.arc(0,0,r-5,0,2*Math.PI,false);
  cxt.stroke();
  cxt.font="18px Arial";
  cxt.textAlign='center'
  cxt.textBaseline='middle'
  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.fillText(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.fillStyle="#000"
      cxt.arc(x,y,2,0,2*Math.PI,false);
    }
    else{
      cxt.fillStyle="#ccc"
      cxt.arc(x,y,2,0,2*Math.PI,false);
    }
    cxt.fill(); 
  }
}
function drawHour(hour,minute){
  cxt.save();
  cxt.beginPath();
  var rad=2*Math.PI/12*hour;
  var mrad=2*Math.PI/12/60*minute
  cxt.rotate(rad+mrad);
  cxt.lineWidth=6;
  cxt.lineCap='round'
  cxt.moveTo(0,10);
  cxt.lineTo(0,-r/2);
  cxt.stroke();
  cxt.restore();
}
function drawMinute(minute){
  cxt.save();
  cxt.beginPath();
  var rad=2*Math.PI/60*minute;
  cxt.rotate(rad);
  cxt.lineWidth=3;
  cxt.lineCap='round'
  cxt.moveTo(0,10);
  cxt.lineTo(0,-r+30);
  cxt.stroke();
  cxt.restore();
}
function drawSecond(second){
  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();
}
draw();
setInterval(draw,1000);

C'est tout pour cet article, j'espère que cela peut aider à votre apprentissage, et j'espère que vous continuerez à soutenir le tutoriel de cri.

Déclaration : le contenu de cet article est issu du réseau, la propriété intellectuelle appartient à l'auteur, le contenu est apporté par les utilisateurs d'Internet, ce site ne détient pas de propriété, n'a pas été traité par l'éditeur humain et n'assume aucune responsabilité juridique. Si vous trouvez du contenu présumé enfreignant les droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (au moment de l'envoi d'un e-mail, veuillez remplacer # par @ pour faire une plainte, et fournir des preuves pertinentes. Une fois confirmé, ce site supprimera immédiatement le contenu présumé enfreignant les droits d'auteur.)

Manual de base