canvas画时钟

忘是亡心i 2021-10-09 04:18 459阅读 0赞

![70][]

效果如上，可以获取当前时间显示，秒针可以动．

１．文件结构：

![70 1][]

２．html:

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<link rel="stylesheet" type="text/css" href="./clock.css">
    
    	<title>clock</title>
    </head>
    <body>
    
    	<div class="wrapper">
    		<canvas id="clock" height="300px" width="300px"></canvas>
    	</div>
    	<script type="text/javascript" src="./clock.js"></script>
    </body>
    </html>

这里要注意的是：canvas的大小要在<canvas>标签里面设置，不能在css里面用id设置．

２．css:

.wrapper{
    	text-align: center;
    	margin-top: 250px;
    }
    #clock{
    	border:1px solid #ccc;
    	
    }

3.时钟实现js:

/**
     * 
     * @authors Your Name (you@example.org)
     * @date    2018-03-07 14:04:29
     * @version $Id$
     */
    
    var dom = document.getElementById('clock');
    var ctx = dom.getContext("2d"); //获取canvas环境
    var width= ctx.canvas.width;  
    var height = ctx.canvas.height;
    var r = width/2;
    var radio = width/200; //画图的比例，canvas变化大小时内容随着变大小
    //画边框
    function drawBackground(){
    	ctx.save();// 保存状态，后面清除重画的时候要用到，原点坐标是左上角
    	//画外框
    	ctx.translate(r,r); //圆心换到画布正中心(中心变成（０,０））
    	ctx.beginPath();
    	ctx.lineWidth = 10*radio;　//框10px
    	ctx.arc(0,0,r-ctx.lineWidth/2,0, 2*Math.PI,false);  //画圆形
    	ctx.stroke();//描边外框
    
    　　　//画数字
    	var hourNum = [3,4,5,6,7,8,9,10,11,12,1,2];
    	ctx.font = 18 *radio+"px Arial";
    	ctx.textAlign = "center";  //文本的中心被放置在指定的位置，文本对齐
    	ctx.textBaseline = 'middle';　//绘制文本基线
    	hourNum.forEach(function(number,i){
    		var rad = 2*Math.PI/12 *i ; //每个点对应的弧度数
    		var x = Math.cos(rad)*(r-30*radio); 
    		var y = Math.sin(rad)*(r-30*radio);
    		ctx.fillText(number,x,y); //填数字
    	});
    
    	//画点点60个
    	for(var i=0;i<60;i++){
    		var sec = 2*Math.PI/60*i;
    		var x = Math.cos(sec)*(r-18*radio);
    		var y = Math.sin(sec)*(r-18*radio);
    		ctx.beginPath();
    		if(i %5 ===0){  //整数点画大黑点
    			ctx.fillStyle = "#000";  //灰色
    			ctx.arc(x,y,2*radio,0,2*Math.PI,false);//每个计算出的点处都要画圆
    		}else{
    			ctx.fillStyle = "#ccc";  //灰色
    			ctx.arc(x,y,1*radio,0,2*Math.PI);//每个计算出的点处都要画圆
    		}
    		
    		ctx.fill();//填充圆点
    	}
    
    }
    
    //画时针
    function drawHour(hour,min){
    	ctx.save(); //保存当前环境的状态，因为不同时分秒要旋转
    	ctx.beginPath();
    	var rad = 2*Math.PI / 12 *hour;
    	var mrad =  2*Math.PI / 12/ 60 * min;
    	ctx.rotate(rad+mrad);//旋转绘图
    	ctx.lineCap = "round"; //圆形线帽
    	ctx.lineWidth = 4*radio; //线宽
    	ctx.strokeStyle = "#282626"; //笔触颜色
    	ctx.moveTo(0,10*radio);
    	ctx.lineTo(0,-r/2);
    	ctx.stroke();　//划线描边
    	ctx.restore();//恢复之前环境
    }
    //画分针
    function drawMin(min){
    	ctx.save();
    	ctx.beginPath();
    	rad = 2*Math.PI/60 *min;
    	ctx.rotate(rad);
    	ctx.lineCap = "round";
    	ctx.lineWidth = 3*radio;
    	ctx.strokeStyle = "#e33e3e";
    	ctx.moveTo(0,10*radio);
    	//ctx.lineTo(0,-r+35*radio);
    	ctx.lineTo(-2,20*radio);
    	ctx.lineTo(2,20*radio);
    	ctx.lineTo(1,-r+35*radio);
    	ctx.lineTo(-1, -r+35*radio);
    	ctx.stroke();
    	ctx.restore();
    }
    //画秒针
    function drawSec(sec){
    	ctx.save();
    	ctx.beginPath();
    	var rad =2* Math.PI/60*sec;
    	ctx.rotate(rad);
    	ctx.lineWidth = 2*radio;
    	ctx.lineCap ="round";
    	ctx.strokeStyle = "#f4c018";
    	ctx.moveTo(0,20*radio);
    	ctx.lineTo(0,-r+30*radio);
    	ctx.stroke();
    	ctx.restore();
    }
    
    //画螺丝帽
    function drawDot(){
    	ctx.beginPath();
    	ctx.fillStyle = "#fff";
    	ctx.arc(0,0,3*radio,0,2*Math.PI,false);
    	ctx.fill();
    }
    
    
    　　　　　//静态测试：
    	// drawBackground();
    	// drawHour(4,30);
    	// drawMin(30);
    	// drawSec(50);
    	// drawDot();
    //画完整的表
    function draw(){
    	ctx.clearRect(0,0,width,height); //清空工作区重画，不然所有的轨迹都有
    	var now = new Date();
    	var hour = now.getHours();
    	var min = now.getMinutes();
    	var sec = now.getSeconds();
    	drawBackground();
    	drawHour(hour,min);
    	drawMin(min);
    	drawSec(sec);
    	drawDot();
    	ctx.restore();//恢复原来环境，恢复坐标原点左上角．因为中间调用了一次原点是设置，所以需要还原
    }
    
    draw();　//先调用一次
    setInterval(draw, 1000); 　　//每隔１秒画一次．

说明：

１．环境的状态保存和恢复：因为在重新画整个表的时候用了clearRect()整个清楚矩形块的函数，所以它的作用点应该是本来canvas的左上角，而在drawBackground()里面把原点放在了（width/2, height/2）这个位置了，所以在drawBackground（）改变之前，保存左上角的状态(drawBackground()里面的ctx.save())，因为针和数要相对于改变后正中心的新原点画，等全部画完了再恢复状态（draw()里面的restore()恢复左上角为原点）．方便下一轮的重画清除画布．

<table style="margin:15px 0px 0px;padding:0px;border:1px solid rgb(170,170,170);width:809px;color:rgb(0,0,0);font-family:'PingFangSC-Regular', Verdana, Arial, '微软雅黑', '宋体';font-size:14px;background-color:rgb(253,252,248);"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="margin:0px;padding:0px;border-top:0px;"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">save()</td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">保存当前环境的状态</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(245,245,245);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">restore()</td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">返回之前保存过的路径状态和属性</td> 
  </tr> 
 </tbody> 
</table>

２．画法

画指针用到旋转绘图：

<table style="margin:15px 0px 0px;padding:0px;border:1px solid rgb(170,170,170);width:809px;color:rgb(0,0,0);font-family:'PingFangSC-Regular', Verdana, Arial, '微软雅黑', '宋体';font-size:14px;background-color:rgb(253,252,248);"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(245,245,245);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_rotate.asp" title="HTML5 canvas rotate() 方法" style="margin:0px;padding:0px;border-width:0px 0px 1px;border-bottom-style:solid;border-bottom-color:rgb(255,0,0);color:rgb(255,0,0);background:transparent;" rel="nofollow">rotate()</a></td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">旋转当前绘图</td> 
  </tr> 
 </tbody> 
</table>

先计算要旋转的角度，注意开始的位置和数组对应的点位置，转换成弧度参数．

使用这个旋转时要注意：　由于三个针子都是相对自己的转动，所以每个针的函数在执行前要保存环境状态，画好的时候释放状态，即它画好释放后画布是没有旋转的了，就可再画别的针了．

画针子：起始点：ctx.moveTo(x,y) ,下一点 ctx.lineTo(x,y),如果针子向画成梯形状的，可以多写几个lineTo(见分针画法)，其实只写这两个并没有开始画，要执行ctx.stroke()才开始描，或者用ctx.fill()画填充样式的．

设置线条样式：

<table style="width:809px;margin:15px 0px 0px;border-style:solid;border-color:rgb(170,170,170);padding:0px;color:rgb(0,0,0);font-family:'PingFangSC-Regular', Verdana, Arial, '微软雅黑', '宋体';font-size:14px;background-color:rgb(253,252,248);"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="border-top:0px;margin:0px;padding:0px;"> 
   <td style="border-color:rgb(170,170,170);padding:6px 15px 6px 6px;margin:0px;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_linecap.asp" title="HTML5 canvas lineCap 属性" style="color:rgb(144,11,9);margin:0px;padding:0px;border-width:0px 0px 1px;border-bottom-style:solid;border-bottom-color:rgb(144,11,9);background:transparent;" rel="nofollow">lineCap</a></td> 
   <td style="border-color:rgb(170,170,170);padding:6px 15px 6px 6px;margin:0px;vertical-align:text-top;">设置或返回线条的结束端点样式　（<strong>可以设置针子为圆头</strong>）</td> 
  </tr> 
  <tr style="border-top:0px;background-color:rgb(245,245,245);margin:0px;padding:0px;"> 
   <td style="border-color:rgb(170,170,170);padding:6px 15px 6px 6px;margin:0px;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_linejoin.asp" title="HTML5 canvas lineJoin 属性" style="color:rgb(144,11,9);margin:0px;padding:0px;border-width:0px 0px 1px;border-bottom-style:solid;border-bottom-color:rgb(144,11,9);background:transparent;" rel="nofollow">lineJoin</a></td> 
   <td style="border-color:rgb(170,170,170);padding:6px 15px 6px 6px;margin:0px;vertical-align:text-top;">设置或返回两条线相交时，所创建的拐角类型</td> 
  </tr> 
  <tr style="border-top:0px;margin:0px;padding:0px;"> 
   <td style="border-color:rgb(170,170,170);padding:6px 15px 6px 6px;margin:0px;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_linewidth.asp" title="HTML5 canvas lineWidth 属性" style="color:rgb(144,11,9);margin:0px;padding:0px;border-width:0px 0px 1px;border-bottom-style:solid;border-bottom-color:rgb(144,11,9);background:transparent;" rel="nofollow">lineWidth</a></td> 
   <td style="border-color:rgb(170,170,170);padding:6px 15px 6px 6px;margin:0px;vertical-align:text-top;">设置或返回当前的线条宽度</td> 
  </tr> 
 </tbody> 
</table>

设置文字：

<table style="margin:15px 0px 0px;padding:0px;border:1px solid rgb(170,170,170);width:809.333px;color:rgb(0,0,0);font-family:'PingFangSC-Regular', Verdana, Arial, '微软雅黑', '宋体';font-size:14px;background-color:rgb(253,252,248);"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="margin:0px;padding:0px;border-top:0px;"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_font.asp" title="HTML5 canvas font 属性" style="margin:0px;padding:0px;border-width:0px 0px 1px;border-bottom-style:solid;border-bottom-color:rgb(144,11,9);color:rgb(144,11,9);background:transparent;" rel="nofollow">font</a></td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">设置或返回文本内容的当前字体属性</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;background-color:rgb(245,245,245);"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_textalign.asp" title="HTML5 canvas textAlign 属性" style="margin:0px;padding:0px;border-width:0px 0px 1px;border-bottom-style:solid;border-bottom-color:rgb(144,11,9);color:rgb(144,11,9);background:transparent;" rel="nofollow">textAlign</a></td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">设置或返回文本内容的当前对齐方式</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;"> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/canvas_textbaseline.asp" title="HTML5 canvas textBaseline 属性" style="margin:0px;padding:0px;border-width:0px 0px 1px;border-bottom-style:solid;border-bottom-color:rgb(144,11,9);color:rgb(144,11,9);background:transparent;" rel="nofollow">textBaseline</a></td> 
   <td style="margin:0px;padding:6px 15px 6px 6px;border-color:rgb(170,170,170);vertical-align:text-top;">设置或返回在绘制文本时使用的当前文本基线</td> 
  </tr> 
 </tbody> 
</table>

前三个是属性，后一个是画文字的方法：参数是要写的文字和要写入的位置的x,y

画圆：

ctx.beginPath();

ctx.arc(0,0,2,0, 2\*Math.PI,false);

ctx.fill(); //或者ctx.stroke();

**PS:无论画啥．都要先ctx.beginPath() **

**ctx.属性＝＂＊＂　　　ctx.方法(＊＊)  **

[70]: /images/20211009/52dd8d8bd84244ff88d85a4cc5efa71b.png
[70 1]: /images/20211009/e24d1af5da8e473198e6f6cd2bd3a242.png