用 Canvas 绘制实时时钟

之前就看过关于 Canvas 的基础，但是还没上过战场实时过呢，今天就来练练手，画一个实时时钟吧~其实这个特别简单，稍微有点耐心都能完成~话不多少，还是喜欢直接上代码：

test.html 代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>canvas——时钟</title>
<style type="text/css">
	#clock{
		border: 1px solid #ccc;
		box-shadow: 0 0 5px #ccc;
	}
</style>
</head>
<body>
	<div id="clockBox">
		<canvas id="clock" width="200" height="200"></canvas>
	</div>
	<script type="text/javascript" src="../js/test.js"></script>
</body>
</html>

test.js 代码如下：

var dom = document.getElementById("clock");  //获取 Canvas 标签
var ctx = dom.getContext("2d");
var width = ctx.canvas.width;  // 获取 Canvas 标签的宽度
var height = ctx.canvas.height;  // 获取 Canvas 标签的高度
var r = width/2;
var ratio = width/200;	//放大缩小比例，为了让不管 Canvas 标签是放大还是缩小都不会发生样式的改变

//绘制时钟边框
function clockFrame(){
	ctx.save();
	ctx.translate(r,r); //重新映射画布上的（0,0）原点坐标位置
	ctx.beginPath();
	ctx.lineWidth = 20*ratio;  //设置线条宽度
	ctx.arc(0, 0, r-ctx.lineWidth/2, 0, 2*Math.PI, false); // 时钟形状（圆形），arc(x,y,r,sAngle,eAngle,counterclockwise)
	//x、y是圆心坐标；r是圆半径；sAngle起始角度；eAngle结束角度；counterclockwise为true时为逆时针，为false时时顺时针
        ctx.strokeStyle="#FEE440";
	ctx.stroke();
	ctx.fillStyle="#FEF1C4";
	ctx.fill();
	
	for(var i=0; i<60; i++){
		var rad = 2*Math.PI/60*i;
		var x1,x2,y1,y2;		
		x2 = (r-12*ratio)*Math.cos(rad);
		y2 = (r-12*ratio)*Math.sin(rad);
		
		if( i % 5 === 0 ){
			ctx.beginPath();
			if(i==45){	//12点出显示最宽
				ctx.lineWidth = 5;
			}else{
				ctx.lineWidth = 3;
			}
			x1 = (r-25*ratio)*Math.cos(rad);
			y1 = (r-25*ratio)*Math.sin(rad);
			ctx.strokeStyle="#FEE440";
			ctx.moveTo(x1, y1);
			ctx.lineTo(x2, y2);
			ctx.stroke();
		}else{
			ctx.beginPath();
			ctx.lineWidth = 1;
			x1 = (r-18*ratio)*Math.cos(rad);
			y1 = (r-18*ratio)*Math.sin(rad);
			ctx.strokeStyle="#B6B4B2";
			ctx.moveTo(x1, y1);
			ctx.lineTo(x2, y2);
			ctx.stroke();
		}		
	}	
}

//绘制时针
function clockHour(hour,minute){
	ctx.save();
	var rad = 2*Math.PI/12*hour;
	var mrad = 2*Math.PI/12/60*minute;
	ctx.beginPath();
	ctx.rotate(rad + mrad);
	ctx.lineWidth = 6*ratio;
	ctx.lineCap = 'round';
	ctx.moveTo(0, 10*ratio);
	ctx.lineTo(0, -r/2);
	ctx.strokeStyle="#726A5E";
	ctx.stroke();
	ctx.restore();
}

//绘制分针
function clockMinute(minute){
	ctx.save();
	var rad = 2*Math.PI/60*minute;
	ctx.beginPath();
	ctx.rotate(rad);
	ctx.lineWidth = 3*ratio;
	ctx.lineCap = 'round';
	ctx.moveTo(0, 10*ratio);
	ctx.lineTo(0, -r+35*ratio);
	ctx.strokeStyle="#726A5E";
	ctx.stroke();
	ctx.restore();
}

//绘制秒针
function clockSecond(second){
	ctx.save();
	var rad = 2*Math.PI/60*second;
	ctx.beginPath();
	ctx.rotate(rad);
	ctx.moveTo(-2*ratio, 20*ratio);
	ctx.lineTo(2*ratio, 20*ratio);
	ctx.lineTo(1*ratio, -r+18*ratio);
	ctx.lineTo(-1*ratio, -r+18*ratio);
	ctx.fillStyle = "#E25912";
	ctx.fill();
	ctx.restore();
}

//绘制固定指针的小圆圈
function fixedPoint(){
	ctx.beginPath();
	ctx.lineWidth = 4*ratio;
	ctx.arc(0, 0, 6*ratio, 0, 2*Math.PI, false);
	ctx.strokeStyle = "#726A5E";
	ctx.stroke();
	ctx.fillStyle = "#ACE0ED";
	ctx.fill();	
	ctx.fill();
}

function draw(){
	ctx.clearRect(0,0,width,height); //每次都清除一次画布，重新绘制
	var now = new Date();
	var hour = now.getHours();
	var minute = now.getMinutes();
	var second = now.getSeconds();
	
	clockFrame();
	clockHour(hour,minute);
	clockMinute(minute);
	clockSecond(second);
	fixedPoint();
	
	ctx.restore();
	
}

draw();

setInterval(draw,1000);

最终效果图如下（每秒钟都在动）：

就这么完成啦~

用 Canvas 绘制实时时钟

猜你喜欢