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);