首先我们要清楚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>