用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. 在计算坐标的时候，两个函数的"()"里面是弧度制，也就是π的形式。