HTML5-用Canvas制作会走动的时钟

首先我们要清楚canvas是HTML5中新增的一个元素，专门用来绘制图形。在页面放置一个canvas元素，就相当于放置了一个画布，可以在其中进行图形的绘制。

为canvas添加简单的样式

<style>
	body{
		background: black;
	}
	canvas{
		background: #fff;
	}
</style>

<canvas id="canvas" width="400" height="400">
		不支持
</canvas>

下面是使用原生JS实现

<script>
		var oC = document.getElementById("canvas")
		var oGC = oC.getContext("2d") //获取绘制图片的"2d"环境
			
		function draw(){
			var oDate = new Date()
        //获取小时，分钟，秒
				var oHours = oDate.getHours()
				var oMin = oDate.getMinutes()
				var oSec = oDate.getSeconds()
				
				//获取刻度所指向的角度
				var oHoursValue = (-90+oHours*30+oMin/2)*Math.PI/180
				var oMinValue = (-90+oMin*6)*Math.PI/180
				var oSecValue = (-90+oSec*6)*Math.PI/180
				
				//获取60个小刻度
				var x = 200
				var y = 200
				var r = 150
				oGC.save()
				oGC.beginPath()
				for (var i=0;i<60;i++) {
					oGC.moveTo(x,y)
					oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180)
				}
				
				oGC.closePath()
				oGC.stroke()
				oGC.restore()

注意:我们使用两个方法的时候，要注意使用closePath()闭合。因为它会通知canvas当前绘制的图形已经闭合或者形成了完全封闭。

Hint：

绘制圆形,canvas也为我们提供了arc这个方法,

ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)

                   该方法有6个参数，x为绘制圆形的起点横坐标，y表示绘制圆形的起点的纵坐标,radius表示圆的半径，startAngle为开始角度，endAngle为结束的角度, anticlockwise是否按照顺时针方向进行绘制。false表示顺时针。（默认为顺时针）。

 

 

1.制作第一个大圆

oGC.save()
		oGC.beginPath()
		oGC.fillStyle = "white"
		oGC.moveTo(x,y)
		oGC.arc(x,y,r*19/20,0,360*Math.PI/180)
		oGC.closePath()
		oGC.fill()
		oGC.restore()

2.制作另一个圆覆盖第一个大圆

oGC.save()
		oGC.beginPath()
		oGC.fillStyle = "white"
		oGC.moveTo(x,y)
		oGC.arc(x,y,r*18/20,0,360*Math.PI/180)
		oGC.closePath()
		oGC.fill()
		oGC.restore()

3.在内圆制作12个大刻度

oGC.save()
	  oGC.beginPath()
	  oGC.lineWidth = 3
	  for (var i=0;i<12;i++) {
			oGC.moveTo(x,y)
			oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180)
	  }
		oGC.closePath()
		oGC.stroke()
		oGC.restore()

4.最后制作出时针，分针，秒针，并添加旋转的动画效果

//时针
		oGC.save()       //保存当前的环境
		oGC.beginPath()
		oGC.moveTo(x,y)
		oGC.strokeStyle = "blue"
		oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue)
		oGC.closePath()
		oGC.stroke()
		oGC.restore()  //还原我们画小时之前的状态
//分针
		oGC.save()
		oGC.beginPath()
		oGC.moveTo(x,y)
		oGC.strokeStyle = "green"
		oGC.arc(x,y,r*12/20,oMinValue,oMinValue)
		oGC.closePath()
		oGC.stroke()
		oGC.restore()
//秒针
		oGC.save()
		oGC.beginPath()
		oGC.moveTo(x,y)
		oGC.strokeStyle = "red"
		oGC.arc(x,y,r*16/20,oSecValue,oSecValue)
		oGC.closePath()
		oGC.stroke()
		oGC.restore()				
}

//添加旋转的动画效果
setInterval(function(){
	draw()				
	},1000)
						
  draw()
</script>