title: Canvas绘画一个时钟
date: 2016-11-21
tags: HTML5
0x01 时钟款式
<!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)
// 每隔一秒挪用一次 clock 函数
function clock1(){
var drawing = document.querySelector("#myCanvas")
var context = drawing.getContext("2d")
context.save()
//保留最原始的画布状况，云云便不需要 clearRect()消灭全部画布
context.translate(500,350)
//新的画布状况，将圆心移到原始画布状况的(500,350)处
context.rotate(Math.PI/180*180)
// 将全部坐标系挑选 180 deg，轻易显现今后的时刻数字，以保证 12 在顶部
// Start drawing clock shape(等于十二边形)
var r= 200
// 定义表盘半径
context.save()
// 保留当前状况（等于 "第一个状况"[将上一个状况记为第一个状况]）
var radGrad = context.createRadialGradient(0,0,10,0,0,70)
// 增加表盘渐变局限
radGrad.addColorStop(0.4,"black")
radGrad.addColorStop(0.2,"deeppink")
// 增加渐变色彩
context.fillStyle = radGrad;
// 在 fillStyle 中运用渐变色彩
context.strokeStyle = "deeppink"
// 描边色彩
context.lineWidth ="1"
// 线条宽度
context.beginPath()
// 最先绘画
moveTo(0,0)
// 从圆心最先
for(var i=0;i<12;i++){
context.rotate(Math.PI/180*30)
// 每次扭转坐标系 30 deg
context.lineTo(0,r)
// 在 y 轴上描点
}
context.closePath()
// 闭合路劲
context.stroke()
// 描边
context.fill()
// 添补
context.restore()
// 恢复上一个状况(恢复今后当前画布状况 “第一个状况”)
// End clock shape
//Start hours masks
context.save()
// 保留当前状况("第一个状况")
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()
//恢复上一个状况(恢复今后当前画布状况 “第一个状况”)
//End hours masks
// 设置数字花样
context.save()
// 保留当前状况("第一个状况")
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)
// 增加数字
}
context.restore()
//恢复上一个状况(恢复今后当前画布状况 “第一个状况”)
// Start minutes masks
context.save()
// 保留当前状况("第一个状况")
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()
//恢复上一个状况(恢复今后当前画布状况 “第一个状况”)
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()
// 保留当前状况("第一个状况")
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()
//恢复上一个状况(恢复今后当前画布状况 “第一个状况”)
// write minute
//保留当前状况("第一个状况")
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()
//恢复上一个状况(恢复今后当前画布状况 “第一个状况”)
// write seconds
context.save()
//保留当前状况("第一个状况")
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()
//恢复上一个状况(恢复今后当前画布状况 “第一个状况”)
context.restore()
// 恢复到原始状况
}
</script>
</html>