canvas画时钟

最新推荐文章于 2023-03-30 16:19:17 发布

夏天的风欧阳冰嫣

最新推荐文章于 2023-03-30 16:19:17 发布

阅读量314

点赞数

分类专栏：前端开发文章标签： canvas 前端开发

本文链接：https://blog.csdn.net/wenjiusui8083/article/details/79473517

版权

前端开发专栏收录该内容

59 篇文章 2 订阅

订阅专栏

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

１．文件结构：

２．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()恢复左上角为原点）．方便下一轮的重画清除画布．

save()	保存当前环境的状态
restore()	返回之前保存过的路径状态和属性

２．画法

画指针用到旋转绘图：

rotate()	旋转当前绘图

rotate()

旋转当前绘图

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

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

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

设置线条样式：

lineCap	设置或返回线条的结束端点样式　（可以设置针子为圆头）
lineJoin	设置或返回两条线相交时，所创建的拐角类型
lineWidth	设置或返回当前的线条宽度

设置文字：

font	设置或返回文本内容的当前字体属性
textAlign	设置或返回文本内容的当前对齐方式
textBaseline	设置或返回在绘制文本时使用的当前文本基线