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)
详细解释都在代码中,如下:[html] view plain copy
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Clock</title>
<style>
body{background: #dddddd}
#canvas{margin: 20pxpadding:20pxbackground: #ffffffborder: thin inset #aaaaaa}
</style>
</head>
<body>
<canvas id=canvas height="300" width="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
/** 定义字体高度 */
var FONT_HEIGHT = 15,
/** 偏移量 */
MARGIN = 35,
/** 指针长度 */
HAND_TRUNCATION = canvas.width/25,
/** 小时指针长度 */
HOUR_HAND_TRUNCATION = canvas.height/10,
/** 指示器 */
NUMERAL_SPACING = 20,
/** 半径 */
RADIUS = canvas.height/2 - MARGIN,
/** 指针半径 */
HAND_RADIUS = RADIUS + NUMERAL_SPACING
/** 画圆 */
function drawCircle(){
context.beginPath()
//画圆
context.arc(canvas.width/2,canvas.height/2,RADIUS,0,Math.PI*2,true)
//执行绘画 stroke是画线
context.stroke()
}
function drawNumerals(){
var numerals = [1,2,3,4,5,6,7,8,9,10,11,12]
var angle = 0
var numeralWidth = 0
for(var i in numerals){
angle = Math.PI/6 * (numerals[i]-3)
numeralWidth = context.measureText(numerals[i]).width
context.fillText(numerals[i],canvas.width/2+Math.cos(angle)*(HAND_RADIUS) - numeralWidth/2,
canvas.height/2 + Math.sin(angle)*(HAND_RADIUS)+FONT_HEIGHT/3)
}
}
//画中心圆点
function drawCenter(){
context.beginPath()
context.arc(canvas.width/2,canvas.height/2,5,0,Math.PI*2,true)
//fill是画实心圆,填充
context.fill()
}
//绘画指针
function drawHand(loc,isHour){
var angle = (Math.PI*2)*(loc/60) - Math.PI/2,
handRadius = isHour ? RADIUS - HAND_TRUNCATION - HOUR_HAND_TRUNCATION : RADIUS - HAND_TRUNCATION
context.moveTo(canvas.width/2,canvas.height/2)
context.lineTo(canvas.width/2 + Math.cos(angle) * handRadius,canvas.height/2 + Math.sin(angle)*handRadius)
context.stroke()
}
function drawHands(){
//得到当前时间
var date = new Date,hour = date.getHours()
//将24小时制转换为12小时制
hour = hour >12 ? hour - 12 : hour
drawHand(hour*5 + (date.getMinutes()/60)*5,true,0.5)
drawHand(date.getMinutes(),false,0.5)
drawHand(date.getSeconds(),false,0.2)
}
function drawClock(){
//每次清除一次canvas
context.clearRect(0,0,canvas.width,canvas.height)
//重新画,形成动画效果
drawCircle()
drawCenter()
drawHands()
drawNumerals()
}
context.font = FONT_HEIGHT + 'px Arial'
loop = setInterval(drawClock, 1000)
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）