title: Canvas繪畫一個時鐘
date: 2016-11-21
tags: HTML5
0x01 時鐘樣式
Canvas_Clock
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
*{
margin: 0;
padding: 0;
overflow: hidden;
}
#myCanvas{
background: black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="2000" height="1000"></canvas>
</body>
<script type="text/javascript">
setInterval(clock1,1000)
// 每隔一秒調(diào)用一次 clock 函數(shù)
function clock1(){
var drawing = document.querySelector("#myCanvas")
var context = drawing.getContext("2d")
context.save()
//保存最原始的畫布狀態(tài)莉掂，如此便不需要 clearRect()清除整個畫布
context.translate(500,350)
//新的畫布狀態(tài)，將圓心移到原始畫布狀態(tài)的(500,350)處
context.rotate(Math.PI/180*180)
// 將整個坐標系選擇 180 deg，方便顯示之后的時間數(shù)字芽淡，以保證 12 在頂部
// Start drawing clock shape(即是十二邊形)
var r= 200
// 定義表盤半徑
context.save()
// 保存當前狀態(tài)（即是 "第一個狀態(tài)"[將上一個狀態(tài)記為第一個狀態(tài)]）
var radGrad = context.createRadialGradient(0,0,10,0,0,70)
// 添加表盤漸變范圍
radGrad.addColorStop(0.4,"black")
radGrad.addColorStop(0.2,"deeppink")
// 添加漸變顏色
context.fillStyle = radGrad;
// 在 fillStyle 中應(yīng)用漸變顏色
context.strokeStyle = "deeppink"
// 描邊顏色
context.lineWidth ="1"
// 線條寬度
context.beginPath()
// 開始繪畫
moveTo(0,0)
// 從圓心開始
for(var i=0;i<12;i++){
context.rotate(Math.PI/180*30)
// 每次旋轉(zhuǎn)坐標系 30 deg
context.lineTo(0,r)
// 在 y 軸上描點
}
context.closePath()
// 閉合路勁
context.stroke()
// 描邊
context.fill()
// 填充
context.restore()
// 恢復(fù)上一個狀態(tài)(恢復(fù)以后當前畫布狀態(tài) “第一個狀態(tài)”)
// End clock shape
//Start hours masks
context.save()
// 保存當前狀態(tài)("第一個狀態(tài)")
context.strokeStyle = "deeppink"
context.fillStyle = "deeppink"
for(var j=0;j<12;j++){
context.beginPath()
context.rotate(Math.PI/180*30)
context.moveTo(0,r)
context.lineTo(0,r-10);
// hour masks
// context.closePath() 繪制直線的時候不需要閉合路徑嗦枢，切記！
context.stroke()
// 描邊
}
context.restore()
//恢復(fù)上一個狀態(tài)(恢復(fù)以后當前畫布狀態(tài) “第一個狀態(tài)”)
//End hours masks
// 設(shè)置數(shù)字格式
context.save()
// 保存當前狀態(tài)("第一個狀態(tài)")
context.strokeStyle = "deeppink"
context.fillStyle = "deeppink"
context.lineWidth = "1"
context.font = "20px 宋體"
context.textAlign = "center"
context.textBaseline = "middle"
for(var k=0;k<12;k++){
context.rotate(Math.PI/180*30)
context.fillText(k+1,0,r-20)
// 添加數(shù)字
}
context.restore()
//恢復(fù)上一個狀態(tài)(恢復(fù)以后當前畫布狀態(tài) “第一個狀態(tài)”)
// Start minutes masks
context.save()
// 保存當前狀態(tài)("第一個狀態(tài)")
context.strokeStyle = "deeppink"
for(var k=0;k<60;k++){
if(k%5 !=0){
context.beginPath()
context.moveTo(0,r-5)
context.lineTo(0,r-10)
context.stroke()
}
context.rotate(Math.PI/180*6)
}
context.restore()
//恢復(fù)上一個狀態(tài)(恢復(fù)以后當前畫布狀態(tài) “第一個狀態(tài)”)
var date = new Date()
var hour = date.getHours()
var minute = date.getMinutes()
var seconds = date.getSeconds()
hour = hour>12?hour-12:hour
// write hours
context.save()
// 保存當前狀態(tài)("第一個狀態(tài)")
context.strokeStyle = "deeppink"
context.lineWidth ="4"
context.beginPath()
context.rotate(Math.PI/180*(360/12*hour)+Math.PI/180*(30*(minute/60))+Math.PI/180*(360/12*(seconds/3600)))
context.moveTo(0,0)
context.lineTo(0,130)
context.stroke()
context.restore()
//恢復(fù)上一個狀態(tài)(恢復(fù)以后當前畫布狀態(tài) “第一個狀態(tài)”)
// write minute
//保存當前狀態(tài)("第一個狀態(tài)")
context.save()
context.strokeStyle = "deeppink"
context.width = "3"
context.beginPath()
context.rotate(Math.PI/180*(6*minute)+Math.PI/180*(6*(seconds/60)))
context.moveTo(0,0)
context.lineTo(0,170)
context.stroke()
context.restore()
//恢復(fù)上一個狀態(tài)(恢復(fù)以后當前畫布狀態(tài) “第一個狀態(tài)”)
// write seconds
context.save()
//保存當前狀態(tài)("第一個狀態(tài)")
context.strokeStyle = "deeppink"
context.width = ""
context.beginPath()
context.rotate(Math.PI/180*(6*seconds))
context.moveTo(0,0)
context.lineTo(0,180)
context.stroke()
context.restore()
//恢復(fù)上一個狀態(tài)(恢復(fù)以后當前畫布狀態(tài) “第一個狀態(tài)”)
context.restore()
// 恢復(fù)到原始狀態(tài)
}
</script>
</html>
```