JavaScript html5 canvas绘制时钟效果
本文实例讲述了JavaScript+html5canvas绘制时钟效果。分享给大家供大家参考,具体如下:
HTML部分:
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"> <title>canvas绘图</title> </head> <bodyonload="init()"> <canvasid="canvas"width="200px"height="200px"></canvas> </body> </html>
JavaScript部分:
functioninit(){ varcanvas=document.getElementById("canvas"), context=canvas.getContext("2d"); setInterval(function(){draw(canvas,context)},1000); } functiondraw(canvas,context){ varx=canvas.width, y=canvas.height, r=Math.min(x/2,y/2); context.clearRect(0,0,x,y);//清除绘画历史 //绘画钟框 context.fillStyle="#f1f1f1"; drawCircle(context,x,y,r); //绘画文字 vartx=x/2,ty=y/2,tr=0.8*r; context.font="bold12px微软雅黑"; context.fillStyle="#000"; drawText(context,"1",tx+0.5*tr,ty-0.866*tr); drawText(context,"2",tx+0.866*tr,ty-0.5*tr); drawText(context,"3",tx+tr,ty); drawText(context,"4",tx+0.866*tr,ty+0.5*tr); drawText(context,"5",tx+0.5*tr,ty+0.866*tr); drawText(context,"6",tx,ty+tr); drawText(context,"7",tx-0.5*tr,ty+0.866*tr); drawText(context,"8",tx-0.866*tr,ty+0.5*tr); drawText(context,"9",tx-tr,ty); drawText(context,"10",tx-0.866*tr,ty-0.5*tr); drawText(context,"11",tx-0.5*tr,ty-0.866*tr); drawText(context,"12",tx,ty-tr); //获取当前时间 vardate=newDate(), h=date.getHours(), m=date.getMinutes(), s=date.getSeconds(), angleH=(360/12)*Math.PI/180, angleM=(360/60)*Math.PI/180 context.strokeSyle="#000"; //绘制时刻度 drawScale(context,x,y,r,angleH,-0.88*r,-0.96*r,3); //绘制分刻度 drawScale(context,x,y,r,angleM,-0.93*r,-0.96*r,1); //绘画时分秒针 drawCircle(context,x,y,3); drawNeedle(context,x,y,r,h*angleH+m*angleM/12,-0.5*r); drawNeedle(context,x,y,r,m*angleM+s*angleM/60,-0.6*r); drawNeedle(context,x,y,r,s*angleM,-0.75*r); } //绘画圆 functiondrawCircle(context,x,y,r){ context.save(); context.beginPath(); context.arc(x/2,y/2,r,0,Math.PI*2,0); context.fill(); context.closePath(); context.restore(); } //绘画文字方法 functiondrawText(context,text,x,y){ context.save(); x-=(context.measureText(text).width/2); y+=4; context.translate(x,y); context.fillText(text,0,0); context.restore(); } //绘制刻度方法 functiondrawScale(context,x,y,r,rotate,start,end,lineWidth){ context.save(); context.beginPath(); context.translate(x/2,y/2); context.lineWidth=lineWidth; for(vari=0;i<60;i++){ context.rotate(rotate); context.moveTo(0,start); context.lineTo(0,end); } context.closePath(); context.stroke(); context.restore(); } //绘画时分秒针方法 functiondrawNeedle(context,x,y,r,rotate,line){ context.save(); context.translate(x/2,y/2); context.beginPath(); context.rotate(rotate); context.moveTo(0,0.1*r); context.lineTo(0,line); context.closePath(); context.stroke(); context.restore(); }
希望本文所述对大家JavaScript程序设计有所帮助。