<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模拟时钟的效果</title>
</head>
<body>
<canvas id="can1" style="border: 1px solid black" width="300px" height="300px">
</canvas>
<script>
var canvas=document.getElementByIdx_x("can1");
var ctx=canvas.getContext("2d");
//首先画我们的背景
ctx.strokeStyle="black";
ctx.strokeRect(5,5,290,290);
//获取画板的长度和宽度
var cw=canvas.width;
var ch=canvas.height;
//将我们的坐标移动到表盘的中心
ctx.translate(cw/2,ch/2);
//下边绘制我们的刻度盘
draw_watch();
function draw_watch(){
ctx.clearRect(-cw/2,-ch/2,cw,ch);
//设置我们表针的最大长度
var len=Math.min(cw,ch)/2;
//绘制刻度盘
ctx.font="16px 幼圆";
var t_len=len*0.85;
for(var i=0;i<12;i++){
var tag=Math.PI*(3-i)/6;
var tx=t_len*Math.cos(tag);
var ty=-t_len*Math.sin(tag);
if(i==0){
i=12;
ctx.fillText(i,tx,ty);
i=0;
}
else{
ctx.fillText(i,tx,ty);
}
}
//绘制我们的指针部分
//首先获取当前的时间
var d=new Date();
var h= d.getHours();
var m= d.getMinutes();
var s= d.getSeconds();
if(h>12){
h=h-12;
}
//绘制时针
var h_length=len*0.5;
var h_angle=Math.PI*(3-(m/60+h))/6;
drawhand(h_angle,h_length,8,"#000000");
//绘制我们的分针
var m_length=len*0.62;
var m_angle=Math.PI*(15-(m+s/60))/30;
drawhand(m_angle,m_length,4,"#555555");
//绘制我们的秒针
var m_length=len*0.7;
var m_angle=Math.PI*(15-s)/30;
drawhand(m_angle,m_length,1,"#aa0000");
// 表示的是每隔一秒都周期性的运行这个，重复
}
function drawhand(angle,len,width,color){
var h_x=len*Math.cos(angle);
var h_y=-len*Math.sin(angle);
ctx.lineCap="round";
ctx.lineWidth=width;
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(h_x,h_y);
ctx.stroke();
}
setInterval("draw_watch()",1000);
</script>
</body>
</html>
1557
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
