制作网络同步时间钟表的具体操作

效果如下图所示：
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>时钟</title>
    <style type="text/css">
        div{
            width: 500px;
            height: 500px;
            background-image: url(d_6.jpg);
            margin: 0 auto;
            border: 15px solid skyblue;
        }
    </style>
</head>
<body>
    <div>
        <canvas id="mycanvas" width="500px" height="500px"></canvas>
    </div>
    <script type="text/javascript">
        //通过获取画布ID来获取画布对象
        var canvas = document.getElementById('mycanvas');
        //获取画布上下文对象context
        var cxt = canvas.getContext("2d");
        //定义一个时钟方法
        function drawClock(){
            //每次清空画布的布局，使得时针旋转的足迹被清空，仅留下当前运动轨迹
            cxt.clearRect(0,0,canvas.width,canvas.height);

            //定义时钟外圆边框
            cxt.strokeStyle="pink";    //设置外圆边框颜色
            cxt.lineWidth = 10;    //设置外圆边框粗细
            cxt.beginPath();    //开始绘制函数
            cxt.arc(250,250,200,0*Math.PI/180,360*Math.PI/180,true);    //绘制图形（0~360度）
            
            cxt.stroke();    //绘制空心圆函数
            cxt.closePath();    //结束绘制函数
            cxt.clip();    //裁剪圆形
            
            //循环绘制12根时针刻度线
            for(var i=0;i<12;i++){
                cxt.save();    //保存当前状态，每次循环绘制的线均保存
                cxt.lineWidth = 7;    //设置时针刻度线的宽度
                cxt.strokeStyle="red";    //设置时针刻度线的颜色
                cxt.translate(250,250);    //设置原点
                cxt.rotate(30*i*Math.PI/180);    //时针每小时转30度
                cxt.beginPath();    
                cxt.moveTo(0,-175);    //时针刻度线的起始点
                cxt.lineTo(0,-195);    //时针刻度线的经过点
                cxt.stroke();
                cxt.closePath();
                cxt.restore();    //把原始状态恢复回来，保证每次循环起始位置是一致的，确保旋转后不会出错
            }

            //循环绘制60根分针刻度线
            for(var i=0;i<60;i++){
                cxt.save();
                cxt.lineWidth = 3;
                cxt.strokeStyle="red";
                cxt.translate(250,250);
                cxt.rotate(6*i*Math.PI/180);    //时针每小分钟转6度
                cxt.beginPath();
                cxt.moveTo(0,-185);
                cxt.lineTo(0,-195);
                cxt.stroke();
                cxt.closePath();
                cxt.restore();
            }

            //获取系统时间
            var now = new Date();    //获取时间对象
            var sec = now.getSeconds();    //获取当前秒数
            var min = now.getMinutes();    //获取当前分钟数
            var hour = now.getHours();    //获取当前小时数
            hour>12?hour-12:hour;    //判断小时是否大于12小时，如果大于12小时，就执行hour-12，否则执行hour
            hour+=(min/60);    //非整点时时针显示根据分针计算
            // 

            //绘制时针
            cxt.save();
            cxt.lineWidth = 7;
            cxt.strokeStyle="red";
            cxt.translate(250,250);
            cxt.rotate(hour*30*Math.PI/180);    //每小时旋转30度
            cxt.beginPath();
            cxt.moveTo(-0,-80);
            cxt.lineTo(0,10);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();

            //绘制分针
            cxt.save();
            cxt.lineWidth = 5;
            cxt.strokeStyle="pink";
            cxt.translate(250,250);
            cxt.rotate(min*6*Math.PI/180);    //每分钟旋转6度
            cxt.beginPath();
            cxt.moveTo(0,-110);
            cxt.lineTo(0,10);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();

            //绘制秒针
            cxt.save();
            cxt.lineWidth = 5;
            cxt.strokeStyle="#000";
            cxt.translate(250,250);
            cxt.rotate(sec*6*Math.PI/180);    //每分钟旋转6度
            cxt.beginPath();
            cxt.moveTo(0,-130);
            cxt.lineTo(0,10);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();
        }
        //调用时钟方法
        drawClock();
        //每秒调用一次时钟方法
        setInterval(drawClock,1000);
    </script>
</body>
</html>
制作网络同步时间钟表的具体操作

推荐阅读
