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/当前画布的宽度