利用canvas画布画出一个钟表

Posted 2020-09-24

context是一个封装了很多绘图功能的对象。不支持低版本的IE。

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

 

思路是获取到时分秒渲染到页面

1             var now =new Date();
2             var second =now.getSeconds();
3             var minute =now.getMinutes();
4             var hour1 =now.getHours();
5             //将24小时进制转为12小时，且为浮点型
6             var hour=hour1+minute/60;
7             hour=hour>12 ?hour-12:hour;
8             //获取全部时间
9             var time=now.toLocaleString( );        

 

创建画布路径

1                  //开始新路径
2                 cxt.beginPath();
3                 cxt.lineWidth=8;
4                 cxt.strokeStyle="blue";
5                 //路径函数 x,y,r,角度范围,顺时针/逆时针
6                 cxt.arc(250,250,200,0,360,false);
7                 cxt.stroke(); 
8                 cxt.closePath();        

 

画布的时间刻度

  1                 //时刻度
  2                 for(var i=0;i<12;i++){
  3                     //保存当前状态
  4                     cxt.save();
  5                     //刻度粗细
  6                      cxt.lineWidth=5;
  7                     //刻度颜色
  8                     cxt.strokeStyle="black"
  9                     //设置00点,以画布中心为00
 10                     cxt.translate(250,250);
 11                     //设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180
 12                     cxt.rotate(i*30*Math.PI/180);
 13                     cxt.beginPath();
 14                     //刻度起始点
 15                     cxt.moveTo(0,-180);
 16                     //刻度结束点
 17                     cxt.lineTo(0,-195);
 18                     cxt.closePath();
 19                     cxt.stroke();
 20                     //将旋转后的图片返回原画布
 21                     cxt.restore();
 22                 }
 23 
 24                //分刻度
 25                  for(var i=0;i<60;i++){
 26                     //保存当前状态
 27                     cxt.save();
 28                     //刻度粗细
 29                     cxt.lineWidth=3;
 30                     //刻度颜色
 31                     cxt.strokeStyle="black"
 32                     //设置00点,以画布中心为00
 33                     cxt.translate(250,250);
 34                     //设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180
 35                     cxt.rotate(i*6*Math.PI/180);
 36                     cxt.beginPath();
 37                     //起始点
 38                     cxt.moveTo(0,-188);
 39                     cxt.lineTo(0,-195);
 40                     cxt.closePath();
 41                     cxt.stroke();
 42                     //将旋转后的图片返回原画布
 43                     cxt.restore();
 44                 }
 45             //表盘中心
 46                 cxt.beginPath();
 47                 cxt.lineWidth=1;
 48                 cxt.strokeStyle="red";
 49                 cxt.fillStyle="red";
 50                 //路径函数 x,y,r,角度范围,顺时针/逆时针
 51                 cxt.arc(250,250,4,0,360,false);
 52                 cxt.fill();
 53                 cxt.stroke(); 
 54                 cxt.closePath();
 55             //时针
 56                 //保存当前状态
 57                  cxt.save();
 58                  cxt.lineWidth=5;
 59                  cxt.strokeStyle="black";
 60                  //设置异次元空间00点
 61                  cxt.translate(250,250);
 62                  //设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180
 63                  cxt.rotate(hour*30*Math.PI/180);
 64                  cxt.beginPath();     
 65                  cxt.moveTo(0,-120);
 66                  cxt.lineTo(0,10);
 67                  cxt.closePath();
 68                  cxt.stroke();
 69                  cxt.restore();
 70             //分针
 71                  cxt.save();
 72                  cxt.lineWidth="3";
 73                  cxt.strokeStyle="black";
 74                  cxt.translate(250,250);
 75                  cxt.rotate(minute*6*Math.PI/180);
 76                  cxt.beginPath();     
 77                  cxt.moveTo(0,-150);
 78                  cxt.lineTo(0,15);
 79                  cxt.closePath();
 80                  cxt.stroke();
 81                  cxt.restore();
 82             //秒针
 83                  cxt.save();
 84                  cxt.lineWidth="1.5";
 85                  cxt.strokeStyle="red";
 86                  cxt.translate(250,250);
 87                  cxt.rotate(second*6*Math.PI/180);
 88                  cxt.beginPath();     
 89                  cxt.moveTo(0,-160);
 90                  cxt.lineTo(0,20);
 91                  cxt.closePath();
 92                  cxt.stroke();
 93                  //秒针前端小点
 94                  cxt.beginPath();
 95                  //外环为红色
 96                  cxt.strokeStyle="red";
 97                  //灰色填充
 98                  cxt.fillStyle="gray";
 99                  cxt.arc(0,-145,4,0,360,false);
100                    cxt.fill();
101                  cxt.closePath();
102                  cxt.stroke();
103                  cxt.restore();
104             //表盘中心
105                 cxt.beginPath();
106                 cxt.lineWidth=1;
107                 //外环为红色
108                 cxt.strokeStyle="red";
109                 //灰色填充
110                 cxt.fillStyle="gray";
111                 //路径函数 x,y,r,角度范围,顺时针/逆时针
112                 cxt.arc(250,250,4,0,360,false);
113                 cxt.fill();
114                 cxt.stroke(); 
115                 cxt.closePath();
116             //写时间    
117                 cxt.font="15px 黑体 ";
118                  cxt.fillStyle="black";
119                 //实心字
120                 cxt.fillText(time,160,150);

 

 

因为每次都会更新新的时间，需要清除画布

cxt.clearRect(0,0,500,500);

创建一个函数 定时器让画布每秒动一次

 setInterval(drawClock,1000);