最近看了一些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,同时给画布加上一个背景色
你的浏览器太老了不支持canvs标签，看不到时钟！
Step2:在script中通过document.getElementById()来得到画布，同时使用getContext()方法来返回一个对象 指出访问绘图功能必要的API
var clock = document.getElenmentById("clock");
var cxt = clock.getContext('2d');
Step3:使用的到的cxt进行各种属性的设置和绘制了，上代码：
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);
在上面的代码中主要就是标红加粗的那几个属性和方法下面细说一下：
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:本人在网页这一块也是新手一枚，算小白一个，可能很多地方写的也不全面。也可能说法有错误，很多地方知道要那么用，但是具体为什么要那么用 还是没怎么搞懂，引用电路实验老师的一句话就是“原理没搞懂”，慢慢来，一点一点进步咯，抱拳！
