用JavaScript来制作实时的时钟
效果图如下：
接下来，我会一步一步向大家介绍如何制作，并将里面的一些值得注意的事项提出来。
首先是把框架搭构起来，
<div>
<canvas id="canvas" width="500px" height="500px"></canvas>
</div>
<!--
在外面套一个div主要的作用是将画布居中，这样看起来好看一些
-->
然后给出div和canvas的样式：
div{
text-align: center;
margin-top: 150px;
}
/*canvas{
border: 1px solid #000;
}*/
/*给画布一个边框，主要用于调整画布的位置*/
获取画布的宽度与高度，这样我们以后更改的时候后面的内容就可以自动改变了，把代码写活，
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//获取画布宽和高
var width = canvas.width;
var height = canvas.height;
//获取圆的半径
var r = width / 2;
而且将整个画布的原点(0,0)的位置改变，这样有利于后面位置的计算。
translate（x，y）；将x与y点的坐标重新定义为画布的原点。
context.translate(r,r);
原点已经确定好之后就可以画圆了
context.arc(0,0,r - 6,0,Math.PI * 2);
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
| 参数 | 描述 |
|---|---|
| x | 圆的中心的 x 坐标。 |
| y | 圆的中心的 y 坐标。 |
| r | 圆的半径。 |
| sAngle | 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。 |
| eAngle | 结束角，以弧度计。 |
| counterclockwise | 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。 |
然后选择绘制方式，绘制方式有两种：
1 context.stroke()-----描边
2 context.fill()-----填充
//描边
context.arc(100,100,50,0,2* Math.PI);
context.strokeStyle = "#00FFFF";
context.stroke();
//填充
context.beginPath();
context.arc(300,300,50,0,2* Math.PI);
context.closePath();
context.fillStyle = "#FF00FF";
context.fill();
效果图：
值得注意的是，在开始第二个绘制路径的时候，必须加上
context.beginPath(); 和
context.closePath();
不然的话，就会对后面样式的绘制产生影响。
接下来就是将12个数字放到圆的相应的位置，这样一来，我们就要计算每一个位置的x坐标与y坐标。
这就要用到Math.sin()和Math.cos()函数。
//获取x，y坐标,并将12个数字写到相应的位置
var hournum = [3,4,5,6,7,8,9,10,11,12,1,2];
for(var i = 0; i< hournum.length; i++){
//时针旋转的角度（弧度制）
var rad = 2 * Math.PI / 12 * i;
var x = (r - 30) * Math.cos(rad); //获取x坐标
var y = (r - 30) * Math.sin(rad); //获取y坐标
context.fillText(hournum[i],x,y);
}
//画60个点
for(var j = 0; j< 60; j++){
//分针旋转的角度（弧度制）
var rad = 2 * Math.PI / 60 * j;
var x = (r - 18) * Math.cos(rad); //获取x坐标
var y = (r - 18) * Math.sin(rad); //获取y坐标
context.beginPath();
if(j % 5 === 0){ //在3 6 9 12位置，将小圆点的颜色设置为深一些的颜色，可以和其他位置的颜色进行区分
context.fillStyle = "#0f0f0f";
}else{
context.fillStyle = "#f0883a";
}
context.arc(x,y,3,0,Math.PI * 2);
context.closePath();
context.fill();
}
后面就是时针，分针，秒针的绘制，三者基本上是大同小异，我这就给出时针的具体的绘制方法：
//画时针
function drawHour(hour,minu){
context.save(); //保存当前环境
context.beginPath();
var rad_h = 2 * Math.PI / 12 * hour;
var rad_m = 2 * Math.PI / 12 / 60 * minu; //时针的旋转受分针的影响
context.rotate(rad_h + rad_m);
context.lineWidth = 6; //时针的宽度
context.moveTo(0,7); //时针的起始点
context.lineTo(0,-r / 2); //时针的结束点
context.lineCap = "round"; //设置端点形状 如果设置了线帽，就不能有闭合路径
context.strokeStyle = "#000";
context.stroke();
context.restore(); //返回之前所保存的环境
}
至于钉子的绘制方法就是画一个圆，上面已经有了绘制圆的方法，这里就不给出详细的介绍了。
接着是获取系统时间和，对上面函数的调用。
//获取实时时间
function timer(){
context.clearRect(0,0,width,height); //清空之前所画的图形
var now_time = new Date(); //获取当前系统时间
var hour = now_time.getHours(); //获取当前时
var minu = now_time.getMinutes(); //获取当前分
var sec = now_time.getSeconds(); //获取当前秒
fun();
drawHour(hour,minu);
drawMinu(minu,sec);
drawSec(sec);
draw();
context.restore(); //返回之前所保存的环境
}
最后就是设置一个定时器，时间间隔设为1000ms调用一次，这样时钟就实现了。
setInterval(timer,1000);
这里给大家说一下值得注意的地方：
1. 两个函数的运用：
save() ---- 保存当前环境状态
restore() ----- 返回之间保存过得环境状态
2. 在计算坐标的时候，两个函数的"()"里面是弧度制，也就是π的形式。