基于canvas的简易时钟实践

singlow

2014-10-08

关注关注

最近闲下来，开始了HTML5的入门之旅。跟着某视频(避免广告嫌疑)做了两个简单的canvas例子。此处为简易时钟实例。

PS: 例子为实验性例子，欢迎批判~~~~

一、实现逻辑

1、先画出表盘：最外端的圆、时刻度、分秒刻度

2、使用canvas的画布旋转，分别画出时针、分针、秒针(含秒针外端圆点)

3、定时清空画布，并重新绘制时针。

二、代码展示

1、效果图

基于canvas的简易时钟实践

2、以下为代码：

<!DOCTYPE HTML>
<html>
 <head>
	<meta charset="gb2312">
  <title> Canvas-时钟 </title>
 </head>
 <body>
  <canvas width="500" height="500" id="clock" >您的浏览器不支持<code>canvas</code>标签！</canvas>
  <script>
	//获取画布DOM
	var dCanvas = document.getElementById('clock');
	//设置绘图环境.注意只能用小写“2d”
	var paper = dCanvas.getContext('2d');
	var CX=250,CY=250;
	
	//画表盆(蓝色)
	clockHandler();
	window.setInterval(clockHandler,1000);
	function drawClockBg(_paper){
		_paper.lineWidth=10;
		_paper.strokeStyle="blue";
		_paper.beginPath();
		_paper.arc(CX,CY,200,0,360,false);//最后一个参数，表示是否顺时针画
		_paper.stroke();
		_paper.closePath();
	};

	/**
	*	画时针刻度
	*
	**/
	function drawClockHour(_paper){
		for(var i=0;i<12;i++){
			_paper.save();
			_paper.strokeStyle="black";
			_paper.translate(CX,CY);
			_paper.rotate(i*30*Math.PI/180);
			_paper.beginPath();
			_paper.moveTo(0,-175);
			_paper.lineTo(0,-195);
			_paper.stroke();
			_paper.closePath();
			_paper.restore();
		}
	};

	/**
	*	画秒/分刻度
	*
	**/
	function drawClockSecond(_paper){
		for(var i=0;i<60;i++){
			if(i%5===0)continue;
			_paper.save();
			_paper.lineWidth=4;
			_paper.strokeStyle="black";
			_paper.translate(CX,CY);
			_paper.rotate(i*6*Math.PI/180);
			_paper.beginPath();
			_paper.moveTo(0,-185);
			_paper.lineTo(0,-195);
			_paper.stroke();
			_paper.closePath();
			_paper.restore();
		}
	};

	/**
	*	画时针
	**/
	function drawClockHourLine(_paper,_hour){
			_paper.save();
			_paper.lineWidth=10;
			_paper.strokeStyle="black";
			_paper.translate(CX,CY);
			_paper.rotate(_hour*30*Math.PI/180);
			_paper.beginPath();
			_paper.moveTo(0,-85);
			_paper.lineTo(0,5);
			_paper.stroke();
			_paper.closePath();
			_paper.restore();
	};

	/**
	*	画分针
	**/
	function drawClockMinuteLine(_paper,_minute){
			_paper.save();
			_paper.lineWidth=6;
			_paper.strokeStyle="black";
			_paper.translate(CX,CY);
			_paper.rotate(_minute*6*Math.PI/180);
			_paper.beginPath();
			_paper.moveTo(0,-125);
			_paper.lineTo(0,10);
			_paper.stroke();
			_paper.closePath();
			_paper.restore();
	};
	
	/**
	*	画秒针
	**/
	function drawClockSecondLine(_paper,_second){
			_paper.save();
			_paper.lineWidth=3;
			_paper.strokeStyle="red";
			_paper.translate(CX,CY);
			_paper.rotate(_second*6*Math.PI/180);
			//秒针线
			_paper.beginPath();
			_paper.moveTo(0,-185);
			_paper.lineTo(0,15);
			_paper.stroke();
			_paper.closePath();
			//初始化秒针圆点
			drawBaseCircle(_paper,0,-160,"yellow");
			_paper.restore();
	};

	/**
	*	画圆点 表盘圆点、秒针外端圆点
	**/
	function drawBaseCircle(_paper, _x, _y , fs){
			if(typeof fs == 'undefined')  fs = "gray";
			_paper.beginPath();
			_paper.fillStyle=fs;
			_paper.arc(_x,_y,5,0,360,false);
			_paper.fill();
			_paper.closePath();
	}

	/**
	*	定时处理时钟指针
	**/
	function clockHandler(){
		//清空已画的内容
		paper.clearRect(0,0,500,500);

		//画表盆(蓝色)
		drawClockBg(paper);
		//画时刻度
		drawClockHour(paper);
		//画秒刻度
		drawClockSecond(paper);
		//初始化时间
		var nowDate = new Date();
		//获取当前时间的小时数
		var hour = (nowDate.getHours()%12) + parseFloat(nowDate.getMinutes()/60,2);
		//获取当前时间的分钟数
		var minute = nowDate.getMinutes() + parseFloat(nowDate.getSeconds()/60,2);
		//获取当前时间的秒数
		var second = nowDate.getSeconds();

		//初始化时针
		drawClockHourLine(paper,hour);
		//初始化分针
		drawClockMinuteLine(paper,minute);
		//初始化秒针
		drawClockSecondLine(paper,second);
		//初始化中心圆点
		drawBaseCircle(paper,CX,CY);
	};

  </script>
 </body>
</html>

三、后记

1、代码在FireFox 32.0.3上，测试无误！

canvas