? ? ? ? ?最近看了一些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(25