002 <head>
003 <title>HTML5 Test</title>
004 <script type="application/x-javascript">
005 var panel, ctx, img
006 var pw, ph, ox, oy
007 function init(){
008 panel = document.getElementById("panel")
009 pw = panel.width
010 ph = panel.height
011 ox = pw/2
012 oy = ph/2
013 if(panel.getContext){
014 ctx = panel.getContext('2d')
015 }else{
016 alert('Your browser is not support Canvas tag!')
017 }
018
019 ctx.translate(ox, oy)
020
021 img = new Image()
022 img.onload = function(){
023 setInterval('draw()',1000)
024 }
025 img.src = 'bg.jpg'
026 }
027
028
029 function drawSecond(){
030 ctx.save()
031 ctx.rotate(Math.PI/180*currTime().s*6)
032 ctx.strokeStyle = "#09f"
033 ctx.lineWidth = 2
034 ctx.lineCap = 'round'
035 ctx.beginPath()
036 ctx.moveTo(0,0)
037 ctx.lineTo(0,-140)
038 ctx.stroke()
039 ctx.restore()
040 }
041
042 function drawMinute(){
043 ctx.save()
044 ctx.rotate(Math.PI/180*currTime().m*6)
045 ctx.strokeStyle = "#f90"
046 ctx.lineWidth = 6
047 ctx.lineCap = 'round'
048 ctx.beginPath()
049 ctx.moveTo(0,0)
050 ctx.lineTo(0,-100)
051 ctx.stroke()
052 ctx.restore()
053 }
054
055 function drawHour(){
056 ctx.save()
057 ctx.rotate(Math.PI/180*currTime().h*30+Math.PI/180*currTime().m/
058 2)
059 ctx.strokeStyle = "#999"
060 ctx.lineWidth = 10
061 ctx.lineCap = 'round'
062 ctx.beginPath()
063 ctx.moveTo(0,0)
064 ctx.lineTo(0,-60)
065 ctx.stroke()
066 ctx.restore()
067 }
068 function draw(){
069 ctx.clearRect(-pw/2,-ph/2,pw,ph)
070 drawBackground()
071 drawSecond()
072 drawMinute()
073 drawHour()
074 document.getElementById('time').innerHTML=currTimeStr()
075 }
076
077 function drawBackground(){
078 ctx.save()
079 ctx.translate(0, 0)
080 ctx.drawImage(img,-250,-250,500,500)
081 ctx.restore()
082 }
083
084 function currTimeStr(){
085 var d = new Date()
086 var h = d.getHours()
087 var m = d.getMinutes()
088 var s = d.getSeconds()
089 return h+':'+m+':'+s
090 }
091
092 function currTime(){
093 var d = new Date()
094 var h = d.getHours()
095 var m = d.getMinutes()
096 var s = d.getSeconds()
097 if(h>12){
098 h = h-12
099 }
100 return {"h":h,"m":m,"s":s}
101 }
102 </script>
103 </head>
104 <body onload="init()">
105 <canvas style="border:1px solid #000" id="panel" width="500" height="500
106 ">
107 Your browser is not support Canvas tag!
108 </canvas>
109 <br/>
110 <span id="time"></span>
111 </body>
112 </html>
代码：var clock=document.getElementById("clock")
var cxt=clock.getContext("2d")
function drawNow(){
var now=new Date()
var hour=now.getHours()
var min=now.getMinutes()
var sec=now.getSeconds()
hour=hour>12?hour-12:hour
hour=hour+min/60
//表盘(蓝色)
cxt.lineWidth=10
cxt.strokeStyle="blue"
cxt.beginPath()
cxt.arc(250,250,200,0,360,false)
cxt.closePath()
cxt.stroke()
//刻度
//时刻度
for(var i=0i<12i++){
cxt.save()
cxt.lineWidth=7
cxt.strokeStyle="black"
cxt.translate(250,250)
cxt.rotate(i*30*Math.PI/180)//旋转角度 角度*Math.PI/180=弧度
cxt.beginPath()
cxt.moveTo(0,-170)
cxt.lineTo(0,-190)
cxt.closePath()
cxt.stroke()
cxt.restore()
}
//分刻度
for(var i=0i<60i++){
cxt.save()
//设置分刻度的粗细
cxt.lineWidth=5
//重置画布原点
cxt.translate(250,250)
//设置旋转角度
cxt.rotate(i*6*Math.PI/180)
//画分针刻度
cxt.strokeStyle="black"
cxt.beginPath()
cxt.moveTo(0,-180)
cxt.lineTo(0,-190)
cxt.closePath()
cxt.stroke()
cxt.restore()
}
//时针
cxt.save()
// 设置时针风格
cxt.lineWidth=7
cxt.strokeStyle="black"
cxt.translate(250,250)
cxt.rotate(hour*30*Math.PI/180)
cxt.beginPath()
cxt.moveTo(0,-140)
cxt.lineTo(0,10)
cxt.closePath()
cxt.stroke()
cxt.restore()
//分针
cxt.save()
cxt.lineWidth=5
cxt.strokeStyle="black"
//设置异次元空间分针画布的中心
cxt.translate(250,250)
cxt.rotate(min*6*Math.PI/180)
cxt.beginPath()
cxt.moveTo(0,-160)
cxt.lineTo(0,15)
cxt.closePath()
cxt.stroke()
cxt.restore()
//秒针
cxt.save()
//设置秒针的风格
//颜色:红色
cxt.strokeStyle="red"
cxt.lineWidth=3
//重置原点
cxt.translate(250,250)
//设置角度
//cxt.rotate(330*Math.PI/180)
cxt.rotate(sec*6*Math.PI/180)
cxt.beginPath()
cxt.moveTo(0,-170)
cxt.lineTo(0,20)
cxt.closePath()
cxt.stroke()
//画出时针,分针,秒针的交叉点
cxt.beginPath()
cxt.arc(0,0,5,0,360,false)
cxt.closePath()
//设置填充
cxt.fillStyle="gray"
cxt.fill()
//cxt.strokeStyle="red"
cxt.stroke()
//画出秒针的小圆点
cxt.beginPath()
cxt.arc(0,-140,5,0,360,false)
cxt.closePath()
//设置填充
cxt.fillStyle="gray"
cxt.fill()
//cxt.strokeStyle="red"
cxt.stroke()</p>
<p> cxt.restore()</p>
<p>}
function drawClock(){
cxt.clearRect(0,0,500,500)
drawNow()
}
drawNow()
setInterval(drawClock,1000)
