Canvas时钟

首先第一步。

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

然后

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

 

定义一个绘制时钟的函数通过计时器每秒调用一次，默认首先通过函数名调用一次然后通过计时器调用。因为如果直接一开始用计时器调用就会比实际时间慢1s

drawfun();
setInterval(drawfun,1000);

 

函数体内容：

1).每次调用前清除一次画布，所以放在第一行。

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

2).绘制时钟的外边框和圆心，很容易就不解释了。

  //时钟框和圆心
  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).绘制小时和分钟的刻度。

//绘制时分刻度
       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 = '#333';
               ctx.lineWidth = 3;
               ctx.lineTo(0,-87);
           }else {//分钟刻度
               ctx.strokeStyle = '#ccc';
               ctx.lineWidth = 2;
               ctx.lineTo(0,-90);
           }
           ctx.stroke();
           ctx.closePath();
           ctx.restore();
       }

4).绘制小时数

//绘制小时数
       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).最后绘制时分秒指针

 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();

本人也是刚开始学习canvas。如有不对，请多包涵和指出。谢谢！

转载于:https://www.cnblogs.com/leitong/p/7478963.html