【JAVASCRIPT】canvas realizes colorful clock effect

index.html

<canvas id="clock" width="500" height="500" ></canvas>

javascript-canvas-realizes-colorful-clock-effect.markdown

【JAVASCRIPT】canvas realizes colorful clock effect

A Pen by Edward Lance Lorilla on CodePen.

License.

script.js

var canvas=document.getElementById("clock");
var context=canvas.getContext("2d");
// canvas.style.backgroundColor=getRandom()
function drawClock(){
  //Clear the canvas
  context.clearRect(0,0,canvas.width,canvas.height)
  //Get Time
  var now=new Date()
  var second=now.getSeconds()
  var minute=now.getMinutes()
  var hour1=now.getHours()
  var hour=hour1+minute/60; //Convert the 24-hour system to the 12-hour system, and it is a floating point
  hour=hour>12?hour-12:hour;
  var time=now.toLocaleString() //Get all time
   
  //Draw the dial
  context.beginPath() //Start path
  context.strokeStyle=getRandom() //Line color
  context.lineWidth=8 //Line thickness
  context.arc(250,250,200,0,360,false)
  context.stroke()
  context.closePath() //End path
  //Drawing time
  for(var i=0;i<12;i++){
    context.save() //Save the current canvas state
    context.translate(250,250) //Reset the origin of the canvas, taking the center of the canvas as the origin
    context.lineWidth=3;
    context.rotate(Math.PI/180*30*i) //Set the canvas rotation angle, the parameter is radians Math.PI/180*30
    context.beginPath()
    context.strokeStyle=getRandom()
    context.moveTo(0,-180) //Start position
    context.lineTo(0,-195) //End position
    context.stroke()
    context.closePath()
    context.restore()
     
  }
  //Draw the subscale
  for(var i=0;i<60;i++){
    context.save() //Save the current canvas state
    context.translate(250,250) //Reset the origin of the canvas, taking the center of the canvas as the origin
    context.lineWidth=1;
    context.rotate(Math.PI/180*6*i) //Set the canvas rotation angle, the parameter is radians Math.PI/180*30
    context.beginPath()
    context.strokeStyle=getRandom()
    context.moveTo(0,-188) //Start position
    context.lineTo(0,-195) //End position
    context.stroke()
    context.closePath()
    context.restore()
     
  }
  //Hour hand
  context.save()
  context.lineWidth=5;
  context.strokeStyle=getRandom()
  context.translate(250,250)
  context.rotate(hour*30*Math.PI/180)
  context.beginPath()
  context.moveTo(0,10)
  context.lineTo(0,-100)
  context.stroke()
  context.closePath()
  context.restore()
   
  //Minute hand
  context.save()
  context.lineWidth=3;
  context.strokeStyle=getRandom()
  context.translate(250,250)
  context.rotate(minute*6*Math.PI/180)
  context.beginPath()
  context.moveTo(0,15)
  context.lineTo(0,-130)
  context.stroke()
  context.closePath()
  context.restore()
   
  //Second hand
  context.save()
  context.lineWidth=1;
  context.strokeStyle=getRandom()
  context.translate(250,250)
  context.rotate(second*6*Math.PI/180)
  context.beginPath()
  context.moveTo(0,15)
  context.lineTo(0,-170)
  context.stroke()
  context.closePath()
  context.restore()
  //Dial center
  context.beginPath()
  context.lineWidth=1;
  context.fillStyle="red"
  context.arc(250,250,4,0,360,false)
  context.fill()
  context.closePath()
   
  //Draw text time
  context.font="18px Song Ti Bold"
  context.fillStyle=getRandom()
  context.fillText(time,160,150)
}
drawClock()
setInterval(drawClock,1000)
 
function getRandom(){
  var col="#";
  for(var i=0;i<6;i++){
    col+=Math.round(Math.random()*16).toString(16)
  }
  return col
}