JavaScript Canvas Circular Clock Effect Drawing

This example shares the specific implementation code of the js Canvas circular clock for your reference, the specific content is as follows

!DOCTYPE html
<html>
  <head>
    <meta charset="utf-8" />
    <title>Canvas Clock</title>
    <style type="text/css">
      div{
        text-align: center;
        margin-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-3
    var y=Math.sin(rad)*(r-3
    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.lineWidth=3;
  cxt.lineCap='round'
  cxt.moveTo(0,10);
  cxt.lineTo(0,-r+3
  cxt.stroke();
  cxt.restore();
}
function drawSecond(second){
  cxt.save();
  cxt.beginPath();
  cxt.fillStyle='#c14543''
  var rad=2*Math.PI/60*second;
    
  cxt.moveTo(-2,2
  cxt.lineTo(2,2
  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);

That's all for this article. Hope it will be helpful to your study, and also hope everyone will support the Yelling Tutorial more.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)

Basic Tutorial