Js实现一个简单的钟表动画

canvas{margin-left:500px;margin-top:100px;

}

/*作者：胖兔

时间:2017.8.9

描述：用js和html5 canvas对象实现一个简单钟表程序*/

varCanvas={//属性

Context:document.getElementById("canvas").getContext('2d'),//擦除

Clear:function(){varcxt=Canvas.Context;varwidth=cxt.canvas.width;varheight=cxt.canvas.height;;this.Context.clearRect(0,0, width, height);

},//radius钟表半径,sencondScaleWidth刻度长度，secondHandWidth秒针长度

CreateClock:function(radius,sencondScaleWidth,secondHandWidth){varme= this;varradius=radius;varsencondScaleWidth=sencondScaleWidth;varsecondHandWidth=secondHandWidth;//小时刻度

varhourScaleWidth=sencondScaleWidth*2;//时针分针长度

varhourHandWidth=secondHandWidth*80/100;

//分针长度

varminuteHandWidth=secondHandWidth*90/100;

//确定圆心坐标

varpoint={x:this.Context.canvas.width/2,y:this.Context.canvas.height/2};varctx= this.Context;//获取上下文

//绘制圆圈

functiondrawCircle(){

ctx.save();//记录画笔状态

//确定画笔的位置在圆心点

ctx.translate(point.x,point.y);//ctx.fillStyle = "black";

ctx.strokeStyle="gray";

ctx.lineWidth= 2;

ctx.beginPath();//开始绘制路径

ctx.arc(0,0,radius,0,Math.PI*2);

ctx.closePath();//关闭路径

ctx.stroke();//绘制

ctx.restore();//复位

}//绘制刻度

functiondrawScale(){

ctx.save();//记录画笔状态

varperHourRadian=Math.PI/6;

varperMinuteRadian=Math.PI/30;

//确定画笔的位置在圆心点

ctx.translate(point.x,point.y);

ctx.strokeStyle="gray";//此处为了省事，只在表盘上简单的写了几个时间数字

ctx.font= "bold 30px impack"

vardc=radius-hourScaleWidth-30;

ctx.fillText("3", dc,10);

ctx.fillText("6",-10,dc );

ctx.fillText("9",-dc,10);

ctx.fillText("12",-15,-dc);

ctx.stroke();for(vari=0;i<12;i++){//坐标旋转

ctx.rotate(perHourRadian);

ctx.moveTo(radius-hourScaleWidth,0);

ctx.lineTo(radius,0);

}for(vari=0;i<60;i++){//坐标旋转

ctx.rotate(perMinuteRadian);

ctx.moveTo(radius-sencondScaleWidth,0);

ctx.lineTo(radius,0);

}

ctx.stroke();//绘制

ctx.restore();//radian

}//drawScale();

functiondrawHand(){varmyDate= newDate();varcurHour=myDate.getHours();varcurMinute=myDate.getMinutes();varcurSecond=myDate.getSeconds();//绘制时针

curHour=curHour>12?curHour-12:curHour;varhourRadian=(curHour+curMinute/60+curSecond/3600)*(Math.PI/6);

//绘制分针

varminuteRadian=(curMinute+curSecond/60) * (Math.PI/30);//绘制秒针

varsecondRadian=curSecond*(Math.PI/30);

functionrun(radian,width,color){

ctx.save();

ctx.translate(point.x,point.y);

ctx.rotate(-Math.PI/2);

ctx.strokeStyle=color

ctx.beginPath();

ctx.rotate(radian);

ctx.moveTo(0,0);

ctx.lineTo(width,0);

ctx.closePath();

ctx.stroke();

ctx.restore();

}

run(hourRadian,hourHandWidth,"black");

run(minuteRadian,minuteHandWidth,"green");

run(secondRadian,secondHandWidth,"red");

}//drawHand();

functiondrawAll(){

me.Clear();

drawCircle();

drawScale();

drawHand();

}

setInterval(drawAll,1000);

}

};

Canvas.CreateClock(290,20,200);