lt!doctypehtmlgt
lthtmlgt
ltheadgt
ltmetacharsetutf-8/gt
lttitlegthtml5timerlt/titlegt
ltscript
ltstylegt
.clocks{height:500pxmargin:25pxautoposition:relativewidth:500px}lt/stylegtlt/headgtltbodygtltheadergtlth2gthtml5timerlt/h2gtlt/headergtltdivclassclocksgtltcanvasidcanvaswidth500height500gtlt/canvasgtlt/divgtlt/bodygtlt/htmlgt
ltscriptgtvarcanvas,ctx
varclockradius250varclockimage
functioncomplete(){(0,0,,)}functiondrawscene(){light()vardatefundate()varhours()varminutes()varseconds()hourshoursgt12?hours-12:hoursvarhourhoursminutes/60varminuteminutesseconds/60()ctx.drawimage(clockimage,0,0,500,500)(canvas.width/2,canvas.height/2)()36pxarial#000ctx.textaligncenterctx.textbaselinemiddlefor(varn1nlt12n){vartheta(n-3)*(math.pi*2)/12varxclockradius*0.9*(theta)varyclockradius*0.9*(theta)(n,x,y)}()vartheta(hour-3)*2*math.pi/12(theta)()(-15,-5)(-15,5)(clockradius*0.5,1)(clockradius*0.5,-1)()()()vartheta(minute-15)*2*math.pi/60(theta)()(-15,-4)(-15,4)(clockradius*0.8,1)(clockradius*0.8,-1)()()()vartheta(seconds-15)*2*math.pi/60(theta)()(-15,-3)(-15,3)(clockradius*0.9,1)(clockradius*0.9,-1)#0f0()()()()//画笔结束5//设置里画笔的线宽//可以设置画笔的颜色(250,250,248,0,360,false)//手工绘制圆形，坐标250,250半径200，整圆（0-360度），false意思是顺时针()//绘图()//已经结束画布}$(function(){canvas(canvas)ctx(2d)clockimagefutureimage()setinterval(drawscene,1000)})lt/scriptgt
