学会了Canvas之后,发现canvas几乎什么都能画,看着自己家里的时钟突发奇想,能不能利用canvas画一个时钟出来呢?说搞就搞!
直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas动态时钟</title>
<style>
canvas{
margin: 25px;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="520px" height="520px"></canvas>
<script>
var cxt=document.getElementById('mycanvas').getContext('2d')
function drawClock(){
cxt.clearRect(0,0,520,520)
//画表盘
cxt.save()
cxt.translate(260,260)
cxt.beginPath()
cxt.strokeStyle="#4C5A63"
cxt.arc(0,0,250,0,2*Math.PI,false)
cxt.stroke()
cxt.closePath()
cxt.beginPath()
cxt.strokeStyle="black"
cxt.arc(0,0,230,0,2*Math.PI,false)
cxt.stroke()
cxt.restore()
cxt.closePath()
//画时刻度
for (var i=0;i<12;i++){
cxt.beginPath()
cxt.save()
cxt.translate(260,260)
cxt.lineWidth=4
cxt.strokeStyle="#000"
cxt.rotate(i*30*Math.PI/180)
cxt.moveTo(0,-230)
cxt.lineTo(0,-208)
cxt.stroke()
cxt.restore()
cxt.closePath()
}
//画分刻度
for (var i = 0; i < 60; i++) {
cxt.beginPath()
cxt.save()
cxt.translate(260, 260)
cxt.lineWidth = 2
cxt.strokeStyle = 'black'
cxt.rotate(i * 6 * Math.PI / 180)
cxt.moveTo(0, -230)
cxt.lineTo(0, -220)
cxt.stroke()
cxt.restore()
cxt.closePath()
}
//写时间
cxt.beginPath()
cxt.save()
cxt.translate(260,260)
var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
hourNumbers.map(function (number, i) {
var rad = i*30*Math.PI/180;
var x = Math.cos(rad) * (230 - 50);
var y = Math.sin(rad) * (230 - 50);
cxt.textAlign = 'center';
cxt.textBaseline = 'middle';
cxt.fillStyle="#000"
cxt.font = "42px bold Arial";
cxt.fillText(number, x, y)
});
cxt.restore()
cxt.closePath()
//写文字
var now=new Date()//获取目前时间
sec=now.getSeconds()
min=now.getMinutes()
hour=now.getHours()
var endtime=new Date("2020/12/12 00:00:00")
var second=parseInt((endtime.getTime()-now.getTime())/1000)//解析字符串,获取相差秒数
var day=parseInt(second/3600/24)//获取天数
cxt.fillStyle="red"
cxt.font="20px bold 楷体"
cxt.fillText("距2021年考研还剩: "+day+"天",150,350)
//画时针
cxt.save()
cxt.translate(260,260)
cxt.beginPath()
cxt.lineWidth=7
cxt.strokeStyle="black"
cxt.rotate(hour*30*Math.PI/180)
cxt.moveTo(0,20)
cxt.lineTo(0,-140)
cxt.stroke()
cxt.closePath()
//画分针
cxt.beginPath()
cxt.lineWidth=3
cxt.strokeStyle="black"
cxt.rotate(min*6*Math.PI/180)
cxt.moveTo(0,30)
cxt.lineTo(0,-150)
cxt.stroke()
cxt.closePath()
//画秒针
cxt.beginPath()
cxt.lineWidth=2
cxt.strokeStyle="black"
cxt.rotate(sec*6*Math.PI/180)
cxt.moveTo(0,30)
cxt.lineTo(0,-170)
cxt.stroke()
cxt.closePath()
cxt.restore()
//在原点画按钮
cxt.beginPath()
cxt.fillStyle="red"
cxt.strokeStyle="#F5FEDA"
cxt.arc(260,260,7,0,2*Math.PI,false)
cxt.fill()
cxt.stroke()
cxt.closePath()
}
setInterval(drawClock,1000)
</script>
</body>
</html>
效果如下哦