html5绘制一个时钟,canvas画时钟
对于H5来说，画布可以说是它最有特色的地方。有了它，我们可以随意在网页上画各种图形，玩一些小游戏。网上有很多关于标签画布使用的教程，这里就不介绍了。今天，我们将使用帆布做一个小时钟。
首先，在这个页面中，我用了两张画布，一张用来画静态的时钟表盘和刻度，另一张用来画时钟的三根指针，然后用定位使它们重合。那这里就没什么好说的了。代码附后。
代码将内容复制到剪贴板canvasid= plate draw dial/canvasid= needles draw hour hand/canvas JavaScript代码将内容复制到剪贴板var plate=document . getelementbyid( plate )；varneedles=document . getelementbyid( needles )；needles.setAttribute(style ， position:absolute；top:8px；left:8px；);//这里，因为在chrome中，body的magin值是8px，所以我这里没有设置为0。varcntP=plate . get context( 2d )；var cnth=needles . get context( 2d )；plate.width=800plate.height=500针数.宽度=800；needles.height=500在这里，准备工作已经完成，现在我们准备画时钟。我首先定义了一个构造函数来绘制时钟表盘。
代码将内容复制到剪贴板函数drawclock (CNT，radius，platelen，linewidth，numlen，numlen){ this . CNT=CNT；this.radius=radiusthis . plate len=plate len；this . line width=line width；this.numLen=numLen这个。NUMLEN=NUMLENthis . getcalibcoor=function(I){//获取表盘刻度两端坐标varx=200 this . radius * math . sin(6 * I * math . pi/180)；varY=200-this . radius * Math . cos(6 * I * Math。PI/180)；varx=200(this . radius-this . platelen)* Math . sin(6 * I * Math。PI/180)；vary=200-(this . radius-this . plate len)* Math . cos(6 * I * Math。PI/180)；//获取分钟数的坐标varnumx=200(this . radius-this . plate len-this . numlen)* math . sin(6 * I * math . pi/180)；var numy=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)；var numy=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，numY:numY，numX:numX，numY:numY }；};this . Draw calibration=function(){//为(vari=0，coorObji60I){ COO robj=this . getcalibcoor(I)；this . CNT . begin path()；this.cnt.moveTo(coorObj。x，coorObj。y)；this.cnt.lineTo(coorObj.x，COO robj . y)；this . CNT . close path()；this . CNT . line width=this . line width；this . CNT . stroke style= # DDD ；I % 5==0(this . CNT . stroke style= # AAA )(this . CNT . line width=this . line width * 2)；i==0(this.cnt.strokestyle=#999)(this . CNT . line width=this . line width * 3)；this . CNT . stroke()；this . CNT . font= 10 px arial ；this.cnt.fillStyle=rgba(0，0，0， 2)；this.cnt.fillText(i，coorObj.numx-7，COO robj . numy 3)；I % 5==0(this . CNT . fill style= rgba(0，0，0， 5))(this . CNT . font= 18pxArial )(this . CNT . fill text(I/5，coorObj.numX-5，coorobj . numy 5))；} };} varclock=newdrawclock(cntP，200，5，1，10，25)；//实例化一个表盘对象clock . draw calibration()；这里最重要的部分应该是获取比例尺和数字绘图的坐标。我把刻度的起点放在表盘边缘，然后用表盘的半径减去刻度的长度得到刻度终点的位置，再用角度和三角函数得到两点的坐标。最后可以画出表盘的刻度。在下面的表盘上画出数字也是同样的方法。我把刻度盘的中心放在(200，200)这里。这里我们画了一个静态的时钟表盘。
下面，我定义了另一个构造函数来绘制时钟指针。
Java Script语言代码复制内容到剪贴板函数clockenedle(CNT，R，lineWidth，strokeStyle，lineCap，obj){ this .R=Rthis.cnt=cntthis。线宽=线宽；这个。笔画风格=笔画风格；这个。线帽=线帽；这。getneedlecoor=function(I){ varX=200 this .r * 0.8 *数学。罪(一)；//起点的坐标varY=200-这个r * 0.8 *数学。cos(I)；varx=200-20 *数学。罪(一)；//终点的坐标vary=200 20 *数学。cos(I)；return{X:X，Y:Y，X:X，Y:Y }；};这个。draw needle=function(){ vard=new date().getTime()；varangleswitch(这个。{ case 0:angle=(d/3600000 $ 8)/12 * 360 * Math .PI/180；打破；情况1:角度=d/60000 `/60 * 360 *数学/180；打破；情况二：角度=d/1000 `/60 * 360 *数学/180；打破；} varcoorobj=这个。getneedlecoor(角度)；这个。CNT。begin path()；this.cnt.moveTo(coorobj.x，首席运营官robj。y)；this.cnt.lineTo(coorobj .x，coorobj .y)；//这个。CNT。关闭路径()；这个。CNT。线宽=这个。线宽；这个。CNT。笔画风格=这个。笔画风格；这个。CNT。线帽=这个。线帽；这个。CNT。笔画()；} }这里有两个地方需要说一下：1、在我们获得当前时间的的毫秒数，然后转换为小时的时候，对24取模计算出当天的小时数的时候，这里需要加上8。2、如果想要使用线帽这个属性吗，那么上面在设置路径的时候，不要用closePath()。
到了这里我们还需要一个来绘制指针的方法，并且让指针看起来能够转动：
Java Script语言代码复制内容到剪贴板函数draw(){ cnth。clear rect(0，0，针。宽度，针。身高)；varmzneedle=newclokneedle(cntH，200，1， rgba(0，0，0，5)’、‘圆’，2)；//最后一个参数0代表画时针，1画分针，2画秒针varfzneedle=newclokneedle(cntH，80，3， rgba(0，0，0，4 ，四舍五入，0)；varszneed=newclokneedle(cntH，140，2， rgba(0，0，0，3 ，圆，1)；mzneedle。抽针()；fzneedle。抽针()；SZ针。抽针()；纵向弧(200，200，5，0，2 *数学.)；cntH.fillStyle=rgba(0，0，0，5);cnth。fill()；} setInterval(draw，1)；下面附上该时钟的图片：
以上这篇用HTML5的帆布实现一个炫酷时钟效果就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
原文地址：http://www。cnblogs。com/ww-Ervin-72/p/5325773。超文本标记语言
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。