HTML5之canvas绘制动态时钟

         最近看了一些HTML5的网页，感觉很高端，于是开始上手HTML5,跟着网上的视频学，收获还是不小，今天说说这几天学的HTML5新加的canvas标签，通过写这篇博客来巩固一下这几天学到的东西。

         canvas标签是是HTML5新加的绘制背景的，但是正像"canvas"的意思“画布”一样，它只是一张给别人在上面画东西的东西，就像我们小学时的美术本一样是给我们来 画画的纸，自己并不能画什么东西，所以要想在布上绘制东西就需要借助canvas 的API和javascript操作实现画图或者其他的一些操作。

         canvas有一些自己常用的属性，如"id","width"，"height"，"style...."不用说 ，width和height属性是设置画布的大小的，也就是规定我们所能作图的区域，style属性可以设置画布的背景颜色，同时"id"是每一个画布对象都必须要有的，因为在下面用javascript来操作canvas画布的时候要用到。

下面具体介绍一下使用HTML5来在网页上绘制一个显示当前系统时间的时钟。

       

   

    Step 1：创建一个画布，并指定大小和id,同时给画布加上一个背景色

<canvas id = "clock" width = "500" height ="500" style = "background:gray">
		你的浏览器太老了不支持canvs标签，看不到时钟！
		</canvas>

    Step2:在script中通过document.getElementById()来得到画布，同时使用getContext()方法来返回一个对象     指出访问绘图功能必要的API

   

<script>
var clock = document.getElenmentById("clock");
var cxt = clock.getContext('2d');
</script>

   

    Step3:使用的到的cxt进行各种属性的设置和绘制了，上代码：

    

<script>
			var clock = document.getElementById('clock');
	                var cxt = clock.getContext('2d');
		function drawClock() {	
			//清屏,可以看到针在移动
			cxt.clearRect(0,0,500,500);
			
			//得到系统当前的时间
			var now = new Date();
			//得到时分秒 
			var sec = now.getSeconds();
			var min = now.getMinutes();
			var hour = now.getHours();
			//小时是浮点数 类型要得到时针准确的位置，必须将当前的分钟也转换为//小时
			hour = hour+min/60;
			//将24小时转化为12小时制
			hour =(hour>12)?(hour-12):hour;
			
			
			//绘制表盘
			cxt.lineWidth=10;
			cxt.strokeStyle = "blue";
			cxt.beginPath();
			cxt.arc(250,250,200,0,360,false);
			cxt.stroke();
			cxt.closePath();
			//绘制刻度
				//时刻度
				for(var i = 0; i < 12; i++) {
					cxt.save();
					//设置时针的粗细
					cxt.lineWidth = 7;
					//设置时针的颜色
					cxt.strokeStyle="#000";
					//设置异次元空间的0,0点
					cxt.translate(250,250);
					//再设置旋转角度
					cxt.rotate(i*30*Math.PI/180);
					//开始绘制
					cxt.beginPath();
					cxt.moveTo(0,-170);
					cxt.lineTo(0,-190);
					cxt.stroke();
					cxt.closePath();
					cxt.restore();
				
				}
				//分刻度
				for(var i = 0; i < 60; i++) {
					cxt.save();
					//设置分刻度的粗细
					cxt.lineWidth = 5;
					//设置分刻度的颜色
					cxt.strokeStyle = "#123";
					//设置或者重置画布的0,0点
					cxt.translate(250,250);
					//设置旋转的角度
					cxt.rotate(i*6*Math.PI/180);
					//开始绘制
					cxt.beginPath();
					cxt.moveTo(0,-180);
					cxt.lineTo(0,-190);
					cxt.stroke();
					cxt.closePath();
					cxt.restore();
				}
			//时针
				cxt.save();
				//设置时针风格
				cxt.lineWidth = 7;
				//设置时针的颜色
				cxt.strokeStyle = "#000" ;
				//设置异次元空间的0,0点
				cxt.translate(250,250);
				//设置旋转的角度
				cxt.rotate(hour*30*Math.PI/180);
				//开始绘制
				cxt.beginPath();
				cxt.moveTo(0,-140);
				cxt.lineTo(0,10);
				cxt.stroke();
				cxt.closePath();
				cxt.restore();
			//分针
				cxt.save();
				//设置分针的风格
				cxt.lineWidth = 5;
				cxt.strokeStyle = "#000";
				//设置异次元空间分针画布的圆心
				cxt.translate(250,250);
				//设置旋转角度
				cxt.rotate(min*6*Math.PI/180);
				//开始绘制
				cxt.beginPath();
				cxt.moveTo(0,-160);
				cxt.lineTo(0,15);
				cxt.stroke();
				cxt.closePath();
				cxt.restore();
			
			//秒针
				cxt.save();
				//设置秒针的风格
				cxt.lineWidth = 3;
				cxt.strokeStyle = '#000';
				//设置异次元分针画布的圆心
				cxt.translate(250,250);
				//设置旋转角度
				cxt.rotate(sec*6*Math.PI/180);
				//绘制秒针
				cxt.beginPath();
				cxt.moveTo(0,-170);
				cxt.lineTo(0,20);
				cxt.stroke();
				cxt.closePath();
				//画出时针，分针，秒针的交叉点
				cxt.beginPath();
				cxt.arc(0,0,5,0,360,false);
				//设置填充样式
				cxt.fillStyle = "gray";
				cxt.fill();
				//设置笔触样式(秒针已设置)
				cxt.stroke();
				cxt.closePath();
				
				//设置秒针前段的小圆点
				cxt.beginPath();
				cxt.arc(0,-150,5,0,360,false);
				//设置填充样式
				cxt.fillStyle="gray";
				cxt.fill();
				//设置笔触样式(秒针已设置)
				cxt.stroke();
				cxt.closePath();
				
				cxt.restore();
			
		}
		//使用setInterval(方法名，每隔多少毫秒重绘一下）每隔一段时间重新绘制，看到动的效果
		drawClock();  //刷新不出现延迟
		setInterval(drawClock,1000);
		</script>

 

 在上面的代码中主要就是标红加粗 的那几个属性和方法下面细说一下：

getContext()	返回一个对象，指出访问绘图功能必要的API
lineWidth	设置或返回当前的线条宽度(1--10)
strokeStyle	设置或返回用于笔触的颜色、渐变或模式（线条的）
beginPath()	起始一条路径，或重置当前路径,每画一个新的图形都要重置一个新的路径，不然所有的图会连起来
closePath()	创建从当前点回到起始点的路径，绘图就发生在beginPath()和closePath()中间，有始有终
arc()	创建弧/曲线（用于创建圆形或部分圆）,有六个参数，依次是圆心x,y,坐标，半径，画过的幅度，后面的boolean值控制顺时针还是逆时针
stroke()	绘制已定义的路径,不调用这个方法就不会有东西出来。画的是线条，对应的有填充的fill()
save()	保存当前环境的状态,主要是用在旋转的时候,对应的是下面的释放restore()方法，他们两个是成对出现
restore	返回之前保存过的路径状态和属性。
translate()	重新映射画布上的 (0,0) 位置,目前我只知道主要用在旋转那里，重置圆心，后面的都要以当前的圆心为标准
moveTo()	把路径移动到画布中的指定点，不创建线条,相当于起始点
lineTo()	添加一个新点，和上面的moveTo()指定的点构成一条直线
fillStyle()	设置填充的样式，颜色,和上面的strokeStyle()对应记忆
fill()	填充当前绘图，没有这个方法也不会有显示，和上面的stroke()对应记忆
setInterval()	指定相应的时间再次执行指定的方法，两个参数，一个是方法名，一个是时间
clearRect()	在给定的矩形内清除指定所画的东西。

rotate()

旋转当前绘图,传入一个角度的参数

 

 

以上是这个时钟主要用到的canvas中的API和属性，canvas中的属性和方法是很多的，上面只是一小部分，多练练，多用就会熟悉了。

PS:

1.使用HTML5中的canvas绘制一些图像还是很简单的，感觉比java简单多了。

2:本人在网页这一块也是新手一枚，算小白一个，可能很多地方写的也不全面。也可能说法有错误，很多地方知道要那么用，但是具体为什么要那么用 还是没怎么搞懂，引用电路实验老师的一句话就是“原理没搞懂”，慢慢来，一点一点进步咯，抱拳！