html的canvas使用，时钟绘图总结

       用html5中的canvas来绘制时钟。绘制时钟的大体思想，1、绘制最外层圆圈。2、标记小时数。以及标记小时之间的点点。3、绘制表帧。4、让时钟动起来。

一、绘制外层大圈：

用到的知识点：

a、canvas标签，常用的是将其设置出画布的宽高，如

<canvas  width="300px" height="300px" ></canvas>

b、getContext(参数)；该方法返回用于在画布上绘图的环境（即画布的上下文）；

参数代表的是：该参数指定要在画布上绘制的类型，现在只有2d是合法值，代表要绘制的是2d图形，注意：未来可能会支持3d图形的绘制。

        使用方法：画布上下文环境对象.getContext('2d');

c、画布上下文环境对象.canvas.width/height;

获取可以绘制画布的宽度和高度。

d、translate(x,y):该方法重新设定原点位置，将(x，y)处设置为（0，0）点。

e、arc（1，2，3，4，5，6）绘制圆形的方法；该方法画圆的位置是从x轴的正半开始的。

   参数1：圆心的x坐标；

   参数2：圆心的y轴坐标；

   参数3：圆的半径r；

   参数4：画圆的起始处；

   参数5：画圆的终点处；

   参数6：false，顺时针绘制；true：逆时针绘制；

f、画布上下文环境对象.beginPath();

   创建画布之后，就立即调用该函数，该函数作用是丢弃当前任何定义的路径并开始一条新的路径。它把当前的点设置为（0，0）；

g、画布上下文环境对象.lineWidth=10;设置绘制图形的线条的粗细。

h、  画布上下文环境对象.stroke();//以线条的方法进行绘制

        画布上下文环境对象.fill();//以填充的方法进行绘制；

二、标记小时数

用到知识点：

a、求弧度，每个小时的弧度，rad=2*Math.PI/12;

b、cos(),sin();分别可以求出要填充小时数的横坐标，纵坐标；

c、forEach()数组的遍历

例子：var number=[3,4,5,6,7,8]

number.forEach(function(num,index){

注意：其中num是每次从Number数组中遍历出来的数；

   index代表的是索引数，从0开始；

})

e、画布上下文环境对象.fillText(1，2，3，4);

    该方法是在画布上填充文本内容；有四个参数。

    参数1：要填充的文本；

    参数2：横坐标x；

    参数3：纵坐标y；

    参数4：可选参数，允许文本的最大宽度，以像素单位计算。

d、在画布上填充文本之前可以对文本的大小，对其方式进行处理。

画布上下文环境对象.font="18px Arail";这个是设置要填充的文本的字体大小和字体样式。

画布上下文环境对象.textAlign="";textAlign属性，

画布上下文环境对象.textBaseline="",设置或返回在绘制文本时的当前文本基线。水平的。

画布上下文环境对象.fillStyle="";设置或返回用于填充绘画的颜色，渐变或模式；

代码：

var hoursNumber=[3,4,5,6,7,8,9,10,11,12,1,2];
	hoursNumber.forEach(function(number,index){
		var rad=2*Math.PI/12*index;
		var x=Math.cos(rad)*(radius-40);
		var y=Math.sin(rad)*(radius-40);
		ctx.font="20px Arial";
		ctx.textAlign="center";
		ctx.textBaseline="middle";
		ctx.fillText(number,x,y);

	});
	for(var i=0;i<60;i++){
		var radd=2*Math.PI/60*i;
		var x=Math.cos(radd)*(radius-18);
		var y=Math.sin(radd)*(radius-18);
		ctx.beginPath();
		if(i%5==0){
			ctx.fillStyle="#000";
			ctx.arc(x,y,2,0,2*Math.PI);
		}else{
			ctx.fillStyle="#ccc";
			ctx.arc(x,y,2,0,2*Math.PI);
		}
		ctx.fill();
	}
}

三、绘制表针

所用知识点：

1、save（）和restore（）

save()：保存当前环境的状态；

restore():返回到之前保存过的路径和属性；

2、moveTo（x,y）以及lineTo（）

moveTo（x,y）：将路径移动到画布中的指定点，但是不创建线条。

lineTo（x,y)：添加一个新点，然后在画布上创建从该点到最后指定点之间的线条。

这两个方法结合着用，可以绘制出一头粗，一头细的线条。

3、rotate（rad）：将画布旋转到一定的角度，rad用弧度来表示。

4、lineCap=“”；用来设置所绘制线头两端的形状；

round：是圆头；   square：是正方形头；   butt：默认的，在线头两头添加平直的边缘。

代码：

function drawHour(hour,miunte){
		ctx.save();
		ctx.beginPath();
		var rad=2*Math.PI/12*hour;
		var mrad=2*Math.PI/12/60*miunte;
		ctx.rotate(rad+mrad);
		ctx.lineWidth=6;
		ctx.lineCap="round";
		ctx.moveTo(0,10);
		ctx.lineTo(0,-radius/2);
		ctx.stroke();
		ctx.restore();
	}
	function drawMiunte(miunte){
		ctx.save();
		ctx.beginPath();
		var rad=2*Math.PI/60*miunte;
		ctx.rotate(rad);
		ctx.lineCap="round";
		ctx.lineWidth=4;
		ctx.moveTo(0,10);
		ctx.lineTo(0,(-radius/2)-12);
		ctx.stroke();
		ctx.restore();
	}
	function drawsecond(second){
		ctx.save();
		ctx.beginPath();
		var rad=2*Math.PI/60*second;
		ctx.rotate(rad);
		ctx.moveTo(-2,20);
		ctx.fillStyle="red";
		ctx.lineTo(2,20);
		ctx.lineTo(0.5,-radius+25);
		ctx.lineTo(-0.5,-radius+25);
		ctx.fill();
		ctx.restore();
	}

四、让表针动起来

用到知识点：

1、clearRect（1，2，3，4）；

清除画布，清除画布时应该在原始的原点处，在绘制时钟时，我们将原点移到了画布中心处，在画时钟之前，我们应该save（），保存一下原始的原点位置处，在画完背景图之后，我们使用restore（）在将原点回到原始的原点位置处。

参数1：原点横坐标；         参数2：原点纵坐标；

参数3：要清除的宽度；       参数4：要清除的高度；

2、setInterval（，1000）；1秒绘制一次

五、如果想让当前的时钟，无论变大还是变小之后，样子依旧好看。可以利用比例；

当前的画布的宽度/width=当前的像素/x

即x为我们所需要的比例

rem=width/当前画布的宽度