对H5来说，油画可以说是它最有特色的地方。有了它，我们可以在网页上随意绘制各种图形，玩一些小游戏。网上有很多关于画布使用的教程，这里就不介绍了。今天我们要用帆布做一个小时钟。

首先，我在这个页面中使用了两个画布，一个用于绘制静态时钟表盘和刻度，另一个用于绘制时钟的三个指针，然后使用定位使它们重叠。那么这里就没什么好说的了，代码附在下面。

JavaScript代码将内容复制到剪贴板

canvasid='plate '

画一个表盘

/canvas

canvasid=' needles '

画时针

/canvas

JavaScript代码将内容复制到剪贴板

var plate=document . GetElementbyID(' plate ')；

varneedles=document . GetElementbyID(' needs ')；

needs . SetAttribute(' style '，' position:absolutetop:8px' left:8px');//这里因为chrome中body的magin值是8px，所以这里不设置为0。

varcntP=plate . GetContext(' 2d ')；

varcntH=needs . GetContext(' 2d ')；

plate.width=800

plate.height=500

针叶宽度=800；

针叶高度=500；

到了这里，准备工作就完成了，准备画钟。我首先定义了一个构造函数来绘制时钟表盘。

JavaScript代码将内容复制到剪贴板

functiondrawclock(cnt，radius，platelen，linewidth，numLen，NUMLEN){

this.cnt=cnt

this.radius=radius

this . plate len=plate len；

this . line width=line width；

this.numLen=numLen

这个。NUMLEN=NUMLEN

this . getcaliboor=function(I){

//获取刻度盘两端的坐标

VarX=200 thi . radius * Math . sin(6 * I * Math。PI/180)；

VAlY=200-this . radius * Math . cos(6 * I * Math。PI/180)；

varx=200(this . radius-this . plate len)* Math . sin(6 * I * Math。PI/180)；

vary=200-(this . radius-this . plate len)* Math . cos(6 * I * Math。PI/180)；

//获取分钟数的坐标

var numx=200(this . radius-this . plate len-this . NumLen)* Math . sin(6 * I * Math。PI/180)；

varnumy=200-(this . radius-this . plate len-this . NumLen)* Math . cos(6 * I * Math。PI/180)；

//获取小时数的坐标

varnuMx=200(this . radius-this . plate len-this。NUMLEN)*Math.sin(6*i*Math。PI/180)；

varnumY=200-(this . radius-this . plate len-this。NUMLEN)*Math.cos(6*i*Math。PI/180)；

返回{X:X，Y:Y，X:X，y:y，numx:numx，numy:numy，numX:numX，numy : numy }；

};

这个。draw calibration=function(){//绘制比例

for(vari=0，coorObji60i ){

cooRobj=this . GetCalibCoor(I)；

this . CNT . BeginPath()；

this.cnt.moveTo(coorObj。x，coorObj。y)；

this.cnt.lineTo(coorObj.x，coorobj . y)；

this . CNT . closepath()；

this . CNT . LineWidth=this . LineWidth；

this . CNT . strokestyle=' # DDD '；

I % 5==0(this . CNT . strokestyle=' # AAA ')

(this . CNT . LineWidth=this . LineWidth * 2)；

i==0(this.cnt.strokestyle='#999')

(this . CNT . LineWidth=this . LineWidth * 3)；

this . CNT . stroke()；

this . CNT . font=' 10pxArial '；

this.cnt.fillStyle='rgba(0，0，0， 2)'；

this.cnt.fillText(i，coorObj.numx-7，CooRobj . numy 3)；

I % 5==0(this . CNT . FillStyle=' rgba(0，0，0， 5)')

(this.cnt.font='18pxArial ')

(this.cnt.fillText(i/5，coorObj.numX-5，CooRobj . NumY 5))；

}

};

}

varclock=newdrawclock(cntP，200，5，1，10，25)；//实例化一个dial对象

clock . draw calibration()；

这里最重要的部分应该是得到比例尺和数码制图的坐标。我把画比例尺的起点放在刻度盘的边缘，然后用刻度盘的半径减去比例尺的长度得到比例尺终点的位置，再用角度和三角函数得到两点的坐标。最后可以画出表盘的刻度。下面的刻度盘上的数字也是这样画的。我把表盘的中心放在这里(200，200)。这里我们已经画了一个静态时钟表盘。

接下来，我定义一个构造函数来绘制时钟指针。

JavaScript代码将内容复制到剪贴板

functionclockenldle(CNT，R，lineWidth，strokeStyle，lineCap，obj){

这个R=R

this.cnt=cnt

this.lineWidth=线宽；

this.strokeStyle=strokeStyle

这个。线帽=线帽；

this.obj=obj

这个。GetNiodcoor=函数(I){

varX=200这个. r * 0.8 *数学。罪恶(一)；//起点的坐标

VAlY=200-这个. r * 0.8 *数学。cos(I)；

varx=200-20 *数学。罪恶(一)；//终点的坐标

vary=200 20 *数学。cos(I)；

返回{X:X，Y:Y，X:X，y :y }；

};

这个。drawine=function(){

vard=newDate().getTime()；

可变角度

切换(this.obj){

case0:

angle=(d/3600000 $ 8)/12 * 360 * Math .PI/180；

打破；

case1:

角度=d/60000 `/60 * 360 *数学PI/180；

打破；

case2:

角度=d/1000 `/60 * 360 *数学PI/180；

打破；

}

varcoorobj=这个。GetNindcoor(角度)；

这个。CNT。begin path()；

this.cnt.moveTo(coorobj.x，coorobj。y)；

this.cnt.lineTo(coorobj .x，coorobj .y)；

//这个。CNT。close path()；

这个。CNT。线宽=这个。线宽；

这个。CNT。strokestyle=this。strokestyle

这个。CNT。线帽=这个。线帽；

这个。CNT。stroke()；

}

}

这里有两个地方需要说一下：1、在我们获得当前时间的的毫秒数，然后转换为小时的时候，对24取模计算出当天的小时数的时候，这里需要加上8。2、如果想要使用线帽这个属性吗，那么上面在设置路径的时候，不要用closePath()。

到了这里我们还需要一个来绘制指针的方法，并且让指针看起来能够转动：

Java Script语言代码复制内容到剪贴板

functiondraw(){

cntH.clearRect(0，0，针。宽，针。高);

varmzneedle=NewClockNeedle(CnTH，200，1，' rgba(0，0，0.5)'，' round '，2)；

//最后一个参数0代表画时针，1画分针，2画秒针

varfzneedle=NewClockNeedle(CnTH，80，3，' rgba(0，0，0.4)'，' round '，0)；

varszpine=NewClockNeedle(CnTH，140，2，' rgba(0，0，0.3)'，' round '，1)；

mzneedle.drawNeedle

fzneedle.drawNeedle

SZ针。draw needle()；

cntH.arc(200，200，5，0，2 *数学. PI)；

cntH.fillStyle='rgba(0，0，0.5)'；

cnth。fill()；

}

setInterval(draw，1)；