學會了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>
效果如下哦
