JavaScript canvas text clock

This article example shares the specific code of canvas to implement text clock for your reference. The specific content is as follows

Let’s take a look at the renderings first

Code

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <canvas id="myCanvas" width="600" height="600">Your browser does not support canvas</canvas>
<script>
 var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d");
 ctx.translate(300,300);

 function Clock(ctx){
 this.ctx = ctx; // canvas 2d brushthis.h = ''; // hoursthis.m = ''; // minutesthis.s = ''; // secondsthis.year = ''; // yearthis.mon = ''; // monththis.da = ''; // datethis.day = ''; // weekthis.timer = null; // timerthis.numberText = ['zero','one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','thirteen','fourteen','fifteen','sixteen','seventeen','eighteen','nineteen','twenty','twenty-one','twenty-two','twenty-three','twenty-four','twenty-five','twenty-six','twenty-seven','twenty-eight','twenty-nine','thirty','thirty-one']; 
 this.H=['0 o'clock','1 o'clock','2 o'clock','3 o'clock','4 o'clock','5 o'clock','6 o'clock','7 o'clock','8 o'clock','9 o'clock','10 o'clock','11 o'clock','12 o'clock','13 o'clock','14 o'clock','15 o'clock','16 o'clock','17 o'clock','18 o'clock','19 o'clock','20 o'clock','21 o'clock','22 o'clock'];
 : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
 : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
 
 this.draw = function(){
  this.ctx.clearRect(-300,-300,600,600);
  // Small black circle in the center this.ctx.beginPath();
  this.ctx.arc(0,0,5,0,Math.PI*2,true);
  this.ctx.fill();
  this.ctx.closePath();
  // Draw a long horizontal line this.ctx.beginPath();
  this.ctx.moveTo(0,0);
  this.ctx.lineTo(280,0);
  this.ctx.strokeStyle='#000';
  this.ctx.stroke();
  this.ctx.beginPath();
  this.ctx.font='12px Microsoft YaHei';
  var yearText = '';
  var arr = String(this.year).split('');
  for(var n=0;n<arr.length;n++){
  var num = Number(arr[n]);
  yearText += this.numberText[num];
  }
  var weekday = this.day === 0 ? 'Sunday': 'week'+this.numberText[this.day]; // Week var moText = this.numberText[this.mon]+'month'+ this.numberText[this.da]+'day';
  this.ctx.fillText(yearText+'年',10,-10); // Year text this.ctx.fillText(moText,10,20); // Month/date/week text this.ctx.fillText(weekday,10,40); // Month/date/week text this.drawClock();
 }
 // Draw the scale this.drawClock = function(){
  // Clock this.ctx.save(); // Save the current state this.ctx.rotate(Math.PI / 12 * this.h);
  for(var j=0; j < 24; j++){
  this.ctx.beginPath();
  var color = j === this.h ? '#000': '#ccc';
  this.ctx.strokeStyle = color;
  this.ctx.font='12px Microsoft YaHei';
  this.ctx.strokeText(this.H[j],110,-5);
  this.ctx.closePath();
  this.ctx.rotate(-Math.PI / 12);
  }
  this.ctx.restore(); // Restore to the last state // minutes this.ctx.save(); 
  this.ctx.rotate(Math.PI / 30 * this.m);
  for (var i=0; i < 60; i++){
  this.ctx.beginPath();
  var color = i === this.m ? '#000': '#ccc';
  this.ctx.strokeStyle = color;
  this.ctx.strokeText(this.M[i],170,-5);
  this.ctx.closePath();
  this.ctx.rotate(-Math.PI / 30);
  }
  this.ctx.restore();
  

  // seconds this.ctx.save();
  this.ctx.rotate(Math.PI / 30 * this.s);
  for (var k=0; k < 60; k++){
  this.ctx.beginPath();
  var color = k === this.s ? '#000': '#ccc';
  this.ctx.strokeStyle = color;
  this.ctx.strokeText(this.S[k],230,-5);
  this.ctx.closePath();
  this.ctx.rotate(-Math.PI / 30);
  }
  this.ctx.restore();
  // ctx.rotate(-Math.PI / 30 * this.s);
 }
 // Initialization this.init = function(){
  var that = this;
  this.timer = setInterval(function(){
  that.setTime();
  that.draw();
  },100);
 }
 // Stop this.stop = function(){
  clearInterval(this.timer);
  this.timer = null;
 }
 // Set time this.setTime = function(){
  var date = new Date();
  this.year = date.getFullYear(); // year, int
  this.mon = date.getMonth()+1; // Month, int
  this.da = date.getDate(); // date, int
  this.day = date.getDay(); // day of the week, int


  var hour = date.getHours(); // hour, int
  var minu = date.getMinutes(); // minutes, int
  var sec = date.getSeconds(); // seconds, int
  
 // Milliseconds/1000, mainly for frame animation var minuScond = date.getMilliseconds()/1000;

  var second; // seconds, calculate the rotation angle of seconds, float
  var minute; // minute, calculate the angle of minute, float
  var ho; // Hours, calculate the angle of the hour, float

  if(minuScond > 0.8){
  second = Math.ceil(sec + minuScond);
  second = second >= 60? 0:second;
  } else {
  second = sec + minuScond;
  }
  // When the seconds reach 59, the minutes should transition if (sec === 59) {
  if(minuScond >= 0.8){
   minute = Math.ceil(minu + minuScond);
   minute = minute >=60 ? 0: minute;
  } else{
   minute = minu + minuScond;
  }
  } else{
  minute = minu;
  }
  // The seconds and minutes have reached 59; the hour hand needs to transition if (sec === 59 && minu===59) {
  if(minuScond >= 0.8){
   ho = Math.ceil(hour + minuScond);
   ho = ho >=24 ? 0: ho;
  } else{
   ho = hour + minuScond;
  }
  } else{
  ho = hour;
  }
  this.h = ho; // hours this.m = minute; // minutes this.s = second; // seconds }
 }
 var clock = new Clock(ctx);
 clock.init();
</script>
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: