Make a clock using Canvas

First step.

<canvas id="myCanvas" style="border:1px red solid" width="300px"; height="300px";></canvas>

Then

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");

Define a function that draws the clock and calls it once every second through the timer. By default, it is called once through the function name and then called through the timer. Because if you call it with a timer directly from the beginning, it will be 1s slower than the actual time

drawfun();
setInterval(drawfun,1000);

Function body content:

1). Clear the canvas before each call, so put it in first row.

//清除画布ctx.clearRect(0, 0, 300, 300);

2). Drawing the outer frame and center of the clock is easy to explain.

  //时钟框和圆心  ctx.beginPath();
  ctx.arc(150,150,100,0,2*Math.PI);
  ctx.stroke();
  ctx.beginPath();
  ctx.fillStyle="black";
  ctx.arc(150,150,3,0,2*Math.PI);
  ctx.fill();

3). Draw hour and minute scales.

//绘制时分刻度
       for(var i=0;i<60;i++){
           ctx.save();
           ctx.beginPath();           //让画布以圆心为原点
           ctx.translate(150,150);           //每秒之间的角度
           ctx.rotate(Math.PI*2/60*i);           //开始绘制刻度
           ctx.moveTo(0,-99);           //时钟刻度
           if(i%5==0){
               ctx.strokeStyle = &#39;#333&#39;;
               ctx.lineWidth = 3;
               ctx.lineTo(0,-87);
           }else {//分钟刻度
               ctx.strokeStyle = &#39;#ccc&#39;;
               ctx.lineWidth = 2;
               ctx.lineTo(0,-90);
           }
           ctx.stroke();
           ctx.closePath();
           ctx.restore();
       }

4). Draw the hours

//绘制小时数
       for(var i=0;i<60;i++){
            ctx.beginPath();            //获取每秒秒钟之间的弧度算出小时数的坐标
            var hudu = (2*Math.PI / 360) * 6 * i;            
            var X = 150 + Math.sin(hudu) * 80 - 3.5;            
            var Y = 150 - Math.cos(hudu) * 80 + 5; //注意此处是“-”号，因为我们要得到的Y是相对于（0,0）而言的。
            if(i%5==0){                if(i==0){
                    ctx.fillText("12",X-3,Y);
                }else{
                    ctx.fillText("" + i / 5 + "",X,Y);
                }
                ctx.stroke();
            }
       }

5). Draw the last hour, minute and second pointer

             var date = new Date();       
             var Hour = date.getHours();       //获取小时数(0-23)
       var Minute = date.getMinutes();     //获取分钟数(0-59)
       var Second = date.getSeconds();     //获取秒数(0-59)
       //绘制秒钟       ctx.save();
       ctx.beginPath();       //修改画布原点，以圆心为原点
       ctx.translate(150, 150);       //指针每秒旋转度数
       ctx.rotate(Math.PI * 2 / 60 * Second);
       ctx.strokeStyle = 'red';
       ctx.lineWidth = 1;
       ctx.moveTo(0, 20);
       ctx.lineTo(0, -70);
       ctx.stroke();
       ctx.closePath();
       ctx.restore();       //绘制分钟       
       ctx.save();
       ctx.beginPath();
       ctx.translate(150, 150);       //当前分钟的角度加上每秒分钟旋转的角度，如果不加分钟只会当秒钟过整分的时候才会旋转
       ctx.rotate(Math.PI * 2 / 60 * Minute+Math.PI * 2 / 60/60 * Second);
       ctx.strokeStyle = 'black';
       ctx.lineWidth = 1.5;
       ctx.moveTo(0, 10);
       ctx.lineTo(0, -60);
       ctx.stroke();
       ctx.closePath();
       ctx.restore();       //绘制时钟       
       ctx.save();
       ctx.beginPath();
       ctx.translate(150, 150);       //和分钟一样。
       ctx.rotate(Math.PI * 2 / 12 * Hour+Math.PI * 2 / 60/12 * Minute+Math.PI * 2 / 60/60/12 * Second);
       ctx.strokeStyle = 'black';
       ctx.lineWidth = 2.5;
       ctx.moveTo(0, 8);
       ctx.lineTo(0, -35);
       ctx.stroke();
       ctx.closePath();
       ctx.restore();

The above is the detailed content of Make a clock using Canvas. For more information, please follow other related articles on the PHP Chinese website!