对于H5来说帆布可以说是它最有特色的一个地方了，有了它之后我们可以随意的在网页上画各种各样的图形，做一些小游戏啊什么的帆布。这个标签的用法，在网上也有特别多的教程了，这里就不作介绍了。今天我们就用帆布来做一个小小的时钟。完整的代码在这里https://github.com/wwervin72/HTML5-Clock。

那么首先在这个页面里面我使用了两个帆布，一个用来绘制静态的时钟表盘和刻度，另一个用来绘制时钟的三个指针，然后用定位让他们重合到一起。然后这里没什么好说的，下面附上代码。

canvas id='plate '画表盘/canvascanvas id=' needs '画时针/canvasvar plate=document。getelementbyid(' plate ')；var需求=文档。getelementbyid(' needs ')；需求。setattribute(' style '，' position : absolutetop :8 px ' left :8 px ')；//这里因为铬里面身体的裕度值为8px，所以我这里就没设为0了var CntP=平板。GetContext(' 2d ')；var CnTH=需求。GetContext(' 2d ')；板宽=800;板材.高度=500针宽=800;针头高度=500;到了这里准备工作就做完了，下面就准备绘制时钟了。我先定义了一个绘制时钟表盘的构造函数。

函数绘图时钟(cnt，半径，platelen，线宽，numLen，numLen){这个。碳纳米管=碳纳米管；this.radius=半径；这个。平板透镜=平板透镜；this.linewidth=线宽；this.numLen=numLen这个NUMLEN=NUMLENthis.getCalibCoor=函数{//获得表盘刻度两端的坐标var X=200。半径*数学。罪恶(6 * I *数学/180)；var Y=200-这个半径*数学cos(6 * I *数学/180)；var x=200(这个。半径-这个。platelen)*数学。辛(6 *我*数学.PI/180)；var y=200-(这个。半径-这个。platelen)*数学。cos(6 * 1 *数学.PI/180)；//获得分钟数字的坐标var numx=200(这个。半径-这个。plate len-这个。numlen)*数学。辛(6 *我*数学.PI/180)；var numy=200-(这个。半径-这个。plate len-这个。numlen)*数学。cos(6 * 1 *数学.PI/180)；//获得小时数字的坐标var NuMx=200(这个。半径-这个。平板透镜-这个.数学(6 * 1 *数学).PI/180)；var NumY=200-(这个。半径-这个。平板透镜-这个.NUMLEN)*Math.cos(6*i*Math .PI/180)；返回{X:X，Y:Y，X:X，y:y，numx:numx，numy:numy，numX:numX，numy : numy }；};这个。绘制校准=函数(){//画刻度对于(var i=0，coorObji60I){ coorObj=this。getcaliboor(I)；这个。CNT。begin path()；this.cnt.moveTo(coorObj .x，coorObj .y)；this.cnt.lineTo(coorObj.x，coorObj。y)；这个。CNT。close path()；这个。CNT。线宽=这个。线宽；这个。CNT。strokestyle=' # DDD '；I % 5==0(这个。CNT。strokestyle=' # AAA ')(这个。CNT。线宽=这个。线宽* 2)；i==0(this.cnt.strokestyle='#999')(this。CNT。线宽=这个。线宽* 3)；这个。CNT。笔画()；这个。CNT。font=' 10px Arialthis.cnt.fillStyle='rgba(0，0，0，2)';this.cnt.fillText(i，coorObj.numx-7，coorObj。numy 3)；I % 5==0(这个。CNT。填充样式=' rgba(0，0，0，5)’)(这个。CNT。font=' 18px Arial ')(这。CNT。填充文本(I/5，coorObj.numX-5，coorObj。numy 5))；} };}var clock=new drawclock(cntP，200，5，1，10，25)；//实例化一个表盘对象时钟。绘制校准()；

这里最重要的部分就应该是获得刻度和数字绘制的坐标了。我把绘制刻度的起始点放在了表盘的边缘上，然后从表盘的半径上减去刻度的长度，就可以得到刻度终点的位置，然后利用角度和三角函数得到两个点的坐标。最后就可以绘制出表盘的刻度了。下面绘制出表盘上的数字也是一样的方法。我这里吧表盘的中心放在了(200,200)这里位置。到了这里我们就已经绘制好了一个静态的时钟表盘。

下面我又定义了一个绘制时钟指针的构造函数。

函数时钟线(cnt，R，线宽，strokeStyle，线帽，obj){这个.r=Rhis . CNT=CNT this . line width=线宽；this . strokestyle=strokestyle this。线帽=线帽；this . obj=objthis . GetNiodcoor=函数(一){ var X=200这.r * 0.8 *数学。罪恶(一)；//起点的坐标var Y=200-这个r * 0.8 *数学cos(一)；var x=200-20 *数学。罪恶(一)；//终点的坐标var y=200 20 *数学。cos(一)；返回{X:X，Y:Y，X:X，y :y }；};这个。drawine=function(){ var d=new Date().getTime()；改变角度；开关(这个。{ case 0: angle=(d/3600000 $ 8)/12 * 360 * Math .PI/180；打破；案例1:角度=d/60000 `/60 * 360 *数学/180；打破；案例2:角度=d/1000 `/60 * 360 *数学/180；打破；} var coorobj=这个。GetNiodcoor(角度)；这个。CNT。begin path()；this.cnt.moveTo(coorobj.x，coorobj。y)；this.cnt.lineTo(coorobj .x库罗布y)；//这个。CNT。close path()；这个。CNT。线宽=这个。线宽；这个。CNT。strokestyle=这个。strokestyle这个。CNT。线帽=这个。线帽；这个。CNT。笔画()；} }这里有两个地方需要说一下：1、在我们获得当前时间的的毫秒数，然后转换为小时的时候，对24取模计算出当天的小时数的时候，这里需要加上8。2、如果想要使用线帽这个属性吗，那么上面在设置路径的时候，不要用closePath()。

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

函数draw(){ cntH.clearRect(0，0，needles.width，needs。高度)；var mzneedle=new clockNeedle(CnTH，200，1 '，rgba(0，0，0，5)'、'圆'，2)；//最后一个参数0代表画时针，1画分针，2画秒针var fzneedle=new clockNeedle(CnTH，80，3 '，rgba(0，0，0，4)'，' round '，0)；var SZ pine=new clockNeedle(CnTH，140，2 '，rgba(0，0，0，3)'、'圆'，1)；mzneedle . drawindowfzneedle . drawindowsz pine。绘制松树()；碳纳米管电弧(200，200，5，0，2 *数学. PI)；cntH.fillStyle='rgba(0，0，0，5)';cnth。fill()；} setInterval(draw，1)；下面附上该时钟的图片：

以上就是本文的全部内容，希望对大家的学习有所帮助。