原生javascript制作时钟

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