闲来无事做个时钟来玩玩
用canvas 绘制时钟的大圆，使用动画让指针按照对应的时间速度转动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas1" width="800" height="600"></canvas>
<!--
1：表盘
2：刻度
3：指针
4：获取时间
获取时间，重新绘制：每隔1秒钟绘制：
-->
<script type="text/javascript">
var canvas1 = document.querySelector('#canvas1')
var ctx = canvas1.getContext('2d')
function drawTime(){
//清盘
ctx.clearRect(0,0,800,600)
//表盘
ctx.beginPath()
ctx.arc(400,300,200,0,2*Math.PI)
ctx.lineWidth = 10
ctx.strokeStyle = 'grey'
ctx.stroke()
ctx.closePath()
ctx.save()//保留这个座标系的位置，以及保留ctx的属性样式
//刻度
ctx.translate(400,300)
ctx.save()//保留了移动后的座标原点为400，300像素位置的座标系
//分针的刻度
for(var i = 0; i< 60;i++){
ctx.beginPath()
//移动座标系
//有60个刻度，所以每一次旋转360(2*Math.pi)/60
ctx.rotate(2*Math.PI/60)
ctx.moveTo(170,0)
ctx.lineTo(190,0)
ctx.lineWidth = 5
ctx.strokeStyle = '#aaa'
ctx.stroke()
ctx.closePath()
}
ctx.restore()//恢复到没有旋转前，恢复到座标系为400，300像素位置的座标系
ctx.save()
//时钟的刻度
for(var i = 0; i< 12;i++){
ctx.beginPath()
//移动座标系
//有60个刻度，所以每一次旋转360(2*Math.pi)/60
ctx.rotate(2*Math.PI/12)
ctx.moveTo(165,0)
ctx.lineTo(190,0)
ctx.lineWidth = 10
ctx.strokeStyle = '#333'
ctx.stroke()
ctx.closePath()
}
ctx.restore()
ctx.save()
//获取时间
var nowTime = new Date()
//获取小时
var hour = nowTime.getHours()
//获取分
var min = nowTime.getMinutes()
//获取秒
var sec = nowTime.getSeconds()
if(hour>=12){
hour = hour-12
}
console.log(hour,min,sec)
//将座标系逆时针旋转90
ctx.rotate(-2*Math.PI/4)
ctx.save()
//首先绘制秒针
ctx.beginPath()
ctx.rotate(2*Math.PI/60*sec)
ctx.moveTo(-20,0)
ctx.lineTo(150,0)
ctx.lineWidth = 3
ctx.strokeStyle = 'red'
ctx.stroke()
ctx.closePath()
ctx.restore()
ctx.save()
//绘制分针
ctx.beginPath()
ctx.rotate(2*Math.PI/60*min + 2*Math.PI/60*sec/60)
ctx.moveTo(-15,0)
ctx.lineTo(140,0)
ctx.lineWidth = 5
ctx.strokeStyle = 'darkslategray'
ctx.stroke()
ctx.closePath()
ctx.restore()
ctx.save()
//绘制时针
ctx.beginPath()
ctx.rotate(2*Math.PI/12*hour+2*Math.PI/12*min/60+ 2*Math.PI/12/60*sec/60)
ctx.moveTo(-10,0)
ctx.lineTo(100,0)
ctx.lineWidth = 10
ctx.strokeStyle = 'darkslategray'
ctx.stroke()
ctx.closePath()
ctx.restore()
ctx.restore()
ctx.restore()
requestAnimationFrame(drawTime)
}
//尽最大能力去渲染，也可以保证不卡帧，请求动画帧的方法。
requestAnimationFrame(drawTime)
</script>
</body>
</html>