使用html5的canvas和js来实现时钟效果

效果：使用html5的canvas和js来实现时钟效果
来源：www.K88.NET

<
canvas id="mycanvas" width="600" height="500" style="border: 1px solid
#ccc
margin-top: 50px
margin-left: 300px
">
<
/canvas>

<
script>

 
 
 
clock()

 
 
run()
 
 
 
 
 
 
//加载页面时启动定时器
 
 
var interval
 
 
//定义一个定时器
 
 
function run()
{
 
 
 
 
interval = setInterval(clock, "1000")
 
//定时的设置
 
 
}
 
 
function clock()
{
 
 
 
 
x0 = 300

 
 
 
 
y0 = 200
//表位置
 
 
 
 
r = 150
 
//表半径
 
 
 
 
var mycanvas = document.getElementById('mycanvas')

 
 
 
 
var t = mycanvas.getContext("2d")

 
 
 
 
mycanvas.height=mycanvas.height

 
 
 
 
//画圆
 
 
 
 
t.beginPath()

 
 
 
 
t.strokeStyle = "
#f00"

 
 
 
 
t.arc(x0,y0,r,0,2*Math.PI,true)

 
 
 
 
t.stroke()

 
 
 
 
t.closePath()


 
 
 
 
//画中心点
 
 
 
 
t.beginPath()

 
 
 
 
t.arc(x0,y0,8,0,2*Math.PI,true)

 
 
 
 
t.fillStyle="
#f00"

 
 
 
 
t.fill()

 
 
 
 
t.closePath()


 
 
 
 
//画表盘
 
 
 
 
for(i=0
i<
=60
i++)
{
 
 
 
 
 
 
t.beginPath()

 
 
 
 
 
 
t.strokeStyle="
#f00"

 
 
 
 
 
 
if(i % 15 == 0)
{ //当0,3,6,9时加最粗
 
 
 
 
 
 
 
 
w0 = x0 + (r - 15) * Math.cos(i * 6 * Math.PI / 180)

 
 
 
 
 
 
 
 
h0 = y0 + (r - 15) * Math.sin(i * 6 * Math.PI / 180)

 
 
 
 
 
 
 
 
t.lineWidth = 5

 
 
 
 
 
 
}else
{
 
 
 
 
 
 
 
 
if (i % 5 == 0)
{ //每小时时加粗
 
 
 
 
 
 
 
 
 
 
w0 = x0 + (r - 10) * Math.cos(i * 6 * Math.PI / 180)

 
 
 
 
 
 
 
 
 
 
h0 = y0 + (r - 10) * Math.sin(i * 6 * Math.PI / 180)

 
 
 
 
 
 
 
 
 
 
t.lineWidth = 2

 
 
 
 
 
 
 
 
} else
{ //其他时间
 
 
 
 
 
 
 
 
 
 
w0 = x0 + (r - 5) * Math.cos(i * 6 * Math.PI / 180)

 
 
 
 
 
 
 
 
 
 
h0 = y0 + (r - 5) * Math.sin(i * 6 * Math.PI / 180)

 
 
 
 
 
 
 
 
 
 
t.lineWidth = 1

 
 
 
 
 
 
 
 
}
 
 
 
 
 
 
}
 
 
 
 
 
 
t.moveTo(w0,h0)

 
 
 
 
 
 
w1 = x0 + r * Math.cos(i*6*Math.PI/180)

 
 
 
 
 
 
h1 = y0 + r * Math.sin(i*6*Math.PI/180)

 
 
 
 
 
 
t.lineTo(w1,h1)

 
 
 
 
 
 
t.stroke()

 
 
 
 
 
 
t.closePath()

 
 
 
 
}

 
 
 
 
var d = new Date()

 
 
 
 
h = d.getHours()

 
 
 
 
m = d.getMinutes()

 
 
 
 
s = d.getSeconds()


 
 
 
 
//画时针
 
 
 
 
t.beginPath()

 
 
 
 
t.strokeStyle="
#f00"

 
 
 
 
t.moveTo(x0,y0)

 
 
 
 
t.lineWidth = 8

 
 
 
 
t1 = (h/12+m/60/12+s/60/60/12)*360-90

 
 
 
 
w1 = x0 +  
50*Math.cos(t1*Math.PI/180)

 
 
 
 
h1 = y0 +  
50*Math.sin(t1*Math.PI/180)

 
 
 
 
t.lineTo(w1,h1)

 
 
 
 
t.stroke()

 
 
 
 
t.closePath()


 
 
 
 
//画分针
 
 
 
 
t.beginPath()

 
 
 
 
t.strokeStyle="
#f00"

 
 
 
 
t.moveTo(x0,y0)

 
 
 
 
t.lineWidth = 5

 
 
 
 
t1 = (m/60+s/60/60)*360-90

 
 
 
 
w1 = x0 +  
80*Math.cos(t1*Math.PI/180)

 
 
 
 
h1 = y0 + 80*Math.sin(t1*Math.PI/180)

 
 
 
 
t.lineTo(w1,h1)

 
 
 
 
t.stroke()

 
 
 
 
t.closePath()


 
 
 
 
//画秒针
 
 
 
 
t.beginPath()

 
 
 
 
t.strokeStyle="
#f00"

 
 
 
 
t.moveTo(x0,y0)

 
 
 
 
t.lineWidth = 1

 
 
 
 
t1 = (s/60)*360-90

 
 
 
 
w1 = x0 +  
120*Math.cos(t1*Math.PI/180)

 
 
 
 
h1 = y0 + 120*Math.sin(t1*Math.PI/180)

 
 
 
 
t.lineTo(w1,h1)

 
 
 
 
t.stroke()

 
 
 
 
t.closePath()

 
 
}
<
/script>