canvas__0">HTML5 canvas 时钟绘制
canvas_2">canvas时钟绘制
-
效果展示
因为不会制作动态gif图，只能上传一张静态图了，此时钟会随时间变化
-
原理说明
一个时钟它的钟面是不会改变的，变得只有指针，因此我们需要先将钟面画出来，钟面由圆形和刻度和小时数组成。
圆形我们只需要使用canvas中的 arc 方法即可画出。
对于刻度和小时数，在这里我使用了 rotate 方法，它的作用是旋转图形，这样只需要画出一个刻度，然后将其进行60次旋转，即可将所有刻度画出，当然在此之前需要使用 translate 方法将画布原点定为圆心，这样每次旋转的角度更容易计算。
对于指针，我使用用的方法与画刻度是的方法一样，不同点在于，需要先将每次的时间转化为秒针，分针，时针的角度，再进行刻画，最后再使用 setInterval 方法每隔一秒钟调用一次绘制指针的函数，在这里需要注意一点，就是每次画一次指针都需要清除上一次指针所走的路径，使用到clearRect 方法，它的作用是清除一个矩形区域，前两个参数为起始坐标位置，后两个为矩形区域的长度和宽度，这样一个时钟就绘制完成了（详细注解见代码）。
因为重新定义了画布原点，所以每次定义坐标是需要特别注意。 -
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制时钟</title>
<style type="text/css">css">
#hour,#min,#sec{
width: 30px;
height: 30px;
color: #FFFFFF;
background-color: #605751;
line-height: 30px;
font-size: 12px;
display: inline-block;
text-align: center;
border-radius: 10%;
}
#time{
height: 30px;
line-height: 30px;
position: relative;
top: -25px;
left: 42px;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="250px" height="250px"></canvas>
<div id="time">
<div id="hour">
</div> :
<div id="min">
</div> :
<div id="sec">
</div>
</div>
<script type="text/javascript">
var c=document.getElementById("mycanvas");
var cont=c.getContext("2d");
cont.lineWidth=2;
//画出钟的圆面
cont.beginPath();
cont.arc(101,101,100,0,2*Math.PI);
cont.stroke();
//定画布原点为圆心
cont.translate(101,101);
//画出钟的刻度
drawdial(cont);
setInterval(drawclock,1000);
//setInterval方法无法直接调用带有参数的方法，因此创建一个方法调用这个带有参数的方法
function drawclock(){
drawtime(cont);
}
function drawdial(cont){
//i为刻度数，number为小时数
let i,number;
cont.beginPath();
for(i=1;i<=60;i++){
//每个刻度之间的角度为i*π/30,每次旋转该度数画一个刻度
cont.rotate(i*Math.PI / 30 );
//如果是小时的刻度则令其长度为10，并且在其下添加刻度对应的小时数
//其它刻度长度令其为6，不添加数字
if(i%5==0){
cont.moveTo(0,-99);
cont.lineTo(0,-89);
number=i/5;
//填充小时数
cont.fillText(number,-4,-80,15);
}
else {
cont.moveTo(0,-99);
cont.lineTo(0,-93);
}
//旋转回来，方便下次旋转
cont.rotate(-i*Math.PI / 30);
}
cont.stroke();
}
//获取时间，并且给每个时刻画出指针指向
function drawtime(cont){
//获取时间
var time = new Date();
var h = time.getHours();
var m = time.getMinutes();
var n = time.getSeconds();
//将时间显示出来
if (h<10) {
document.getElementById("hour").innerHTML=("0"+h);
}
else{
document.getElementById("hour").innerHTML=h;
}
if (m<10) {
document.getElementById("min").innerHTML=("0"+m);
}
else{
document.getElementById("min").innerHTML=m;
}
if (n<10) {
document.getElementById("sec" ).innerHTML=("0"+n);
}
else{
document.getElementById("sec").innerHTML=n;
}
//清除上一次指针所走的路径，clearRect函数是清除一个矩形区域，前两个参数为起始位置，后两个为矩形区域的长度和宽度
cont.clearRect(-52,-52,103,103);
//分别调用drawline方法绘制秒针，分针，时针
//通过转化可知，秒针和分针旋转角度都为n（m）*π/30，时针为h*π/12
drawline(cont,n*Math.PI/30,50,2);
drawline(cont,m*Math.PI/30+n*Math.PI/1800,30,3);
drawline(cont,h*Math.PI/6+m*Math.PI/360,20,4);
}
//画出表的指针
//各参数对应的分别是angle为旋转角度，linelength为指针长度，linewidth为指针宽度
function drawline(cont,angle,linelength,linewidth){
cont.beginPath();
//给指针添加圆形线帽
cont.lineCap = "round";
cont.lineWidth=linewidth;
cont.moveTo(0,0);
cont.rotate(angle);
cont.lineTo(0,-linelength);
cont.stroke();
cont.rotate(-angle);
}
</script>
</body>
</html>
