用canvas绘制一个时钟--学习canvas第二天

最新推荐文章于 2021-02-16 02:36:14 发布

原创最新推荐文章于 2021-02-16 02:36:14 发布 · 259 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #canvas

网页学习专栏收录该内容

8 篇文章

订阅专栏

先来看效果图，新手学的比较慢，做的粗糙一点。在这里插入图片描述
首先获取到canvas。获取2d属性，修改他的值。

var canvas = document.getElementById('canvas'),
	context = canvas.getContext('2d'),
	FONT_HEIGHT = 15,
	MARGIN = 35,
	HAND_TRUNCATION = canvas.width/25,
	HOUR_HAND_TRUNCATION = canvas.width/10,
	NUMERAL_SPACING = 20,
	RADIUS = canvas.width/2 -MARGIN,
	HAND_RADIUS = RADIUS + NUMERAL_SPACING;

然后用drawCircle()方法来绘制一个表示钟的圆形，该方法先调用beginPath()来定义路径，然后再调用arc()来创建一个圆形的路径。等调用srtoke()方法后，刚才定义的路径变得可见。

function drawCircle(){
	context.beginPath();
	context.arc(canvas.width/2, canvas.height/2, RADIUS, 0, Math.PI*2, true);
	context.stroke();
}

用drawNumerals()方法通过调用fillText()来绘制钟面周围的数字，fillText()这个方法是用来在canvas进行文本填充的。与arc()方法不同，fillText()方法并不会创建路径，而是直接渲染到canvas上。

function drawNumerals(){
	var numerals = [1,2,3,4,5,6,7,8,9,10,11,12],
		angle = 0,
		numeralsWidth = 0;
	
	numerals.forEach(function(numeral){
		angle = Math.PI/6 * (numeral-3);
		numeralWidth = context.measureText(numeral).width;
		context.fillText(numeral,
				canvas.width/2 + Math.cos(angle)*(HAND_RADIUS)-numeralWidth/2,
				canvas.height/2 + Math.sin(angle)*(HAND_RADIUS)+FONT_HEIGHT/3);
	});
}

绘制时钟中心点

function drawCenter(){
	context.beginPath();
	context.arc(canvas.widtg/2, canvas.height/2,5,0,Math.PI*2,true);
	context.fill();
}

时钟的指针是通过drawHand()方法来绘制的。该方法调用了如下下个用于绘制线段的方法将钟表指针绘制出来：moveTo() lineTo() stroke()。先调用moveTo()方法将画笔移动到canvas中的指定地点，然后调用lineTo()方法，在该点与另外一个指定点之间绘制一条不可见路径，最后stroke()方法将当前路径变为可见。

function drawHand(loc, isHour){
	var angle = (Math.PI*2)*(loc/60) - Math.PI/2,
		handRadius = isHour ? RADIUS -HAND_TRUNCATION-HOUR_HAND_TRUNCATION : RADIUS -HAND_TRUNCATION;
	
	context.moveTo(canvas.width/2,canvas.height/2);
	context.lineTo(canvas.width/2 +Math.cos(angle)*handRadius,
				   canvas.height/2 +Math.sin(angle)*handRadius);
	context.stroke();
}

function drawHands(){
	var date = new Date,
		hour = date.getHours();
	
	hour = hour > 12 ? hour - 12:hour;
	
	drawHand(hour*5 + (date.getMinutes()/60)*5,true,0.5);
	drawHand(date.getMinutes(), false,0.5);
	drawHand(date.getSeconds(), false,0.2);
}

应用程序通过调用setInterval()方法来制作时钟动画的效果。该方法每秒钟都会调用一次drawClock()函数。而后者则使用clearRect()方法来擦出canvas，然后再绘制时钟。

function drawClock(){
	context.clearRect(0,0,canvas.width,canvas.height);
	
	drawCircle();
	drawCenter();
	drawHands();
	drawNumerals();
}


context.font = FONT_HEIGHT + 'px Arial';
loop = setInterval(drawClock,1000);

以上就可以做出上图的效果了。

HTML代码

<!DOCTYPE html>
<html>
<head>
	<title>Time Clock</title>
	<style>
		body{
			background: #dddddd;
		}
		#canvas{
			margin:10px;
			padding:10px;
			background:#ffffff;
			border:thin inset #aaaaaa;
		}
	</style>
</head>
<body>
	<canvas id='canvas' width='700' height='700'>
		Canvas not supported
	</canvas>
	<script src='js/timeclock.js'></script>
</body>
</html>