Javascript实现时钟 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>时钟</title>   
</head>
<body>
    <canvas id="clock" width="500" height="500" style="background-color:white;">你的浏览器不支持canvas</canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("clock");
        var cxt = canvas.getContext("2d");

        function drawClock() {
            var now = new Date();
            var sec = now.getSeconds();
            var min = now.getMinutes();
            var hour = now.getHours();
            hour > 12 ? hour - 12 : hour;
            hour += (min / 60);

            //先清空画布
            cxt.clearRect(0, 0, canvas.width, canvas.height);

            // var img = new Image();
            // img.src = "tw.png";
            // cxt.drawImage(img, 46, 46);
            //img.onload = function () {
            //    cxt.drawImage(img, 0, 0);
            //}

            //画表盘大圆 圆心：x=250 y=250
            // cxt.strokeStyle = "#1C86EE";
            // cxt.lineWidth = 3;
            // cxt.beginPath();
            // cxt.arc(500, 500, 200, 0, 360);
            // cxt.stroke();
            // cxt.closePath();

            //时刻度
            for (var i = 0; i < 12; i++) {
                cxt.save();//保存当前状态
                cxt.lineWidth = 2;
                cxt.strokeStyle = "#1C86EE";  //strokeStyle=color|gradient|pattern 返回用于笔触的颜色、渐变或模式

                //设置原点
                cxt.translate(250, 250);  //重新映射画布上的 (x,y) 位置
                //设置旋转角度
                cxt.rotate(30 * i * Math.PI / 180);//弧度   角度*Math.PI/180 
                cxt.beginPath(); //beginPath() 方法开始一条路径，或重置当前的路径。
                cxt.moveTo(0, -175); //把路径移动到画布中的指定点，不创建线条
                cxt.lineTo(0, -195); //添加一个新点，然后在画布中创建从该点到最后指定点的线条
                cxt.stroke(); //绘制已定义的路径
                cxt.closePath();//创建从当前点回到起始点的路径
                cxt.restore();//返回之前保存过的路径状态和属性s
            }

            //分刻度
            for (var i = 0; i < 60; i++) {
                cxt.save();
                cxt.lineWidth = 2;
                cxt.strokeStyle = "#1C86EE";
                cxt.translate(250, 250);
                cxt.rotate(i * 6 * Math.PI / 180);
                cxt.beginPath();
                cxt.moveTo(0, -185);
                cxt.lineTo(0, -195);
                cxt.stroke();
                cxt.closePath();
                cxt.restore();
            }
          
            //以下的时针、分针、秒针均要转动，所以在这里要设置其异次元空间的位置
            //根据当前的小时数、分钟数、秒数分别设置各个针的角度即可
            //-----------------------------时针-----------------------------
            cxt.save();
            cxt.lineWidth = 5;
            cxt.strokeStyle = "#1C86EE";
            cxt.translate(250, 250);
            cxt.rotate(hour * 30 * Math.PI / 180);//每小时旋转30度
            cxt.beginPath();
            cxt.moveTo(0, -130);
            cxt.lineTo(0, 10);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();

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

            //-----------------------------秒针-----------------------------
            cxt.save();
            cxt.lineWidth = 3;
            cxt.strokeStyle = "#1C86EE";
            cxt.translate(250, 250);
            cxt.rotate(sec * 6 * Math.PI / 180);//每秒旋转6度
            cxt.beginPath();
            cxt.moveTo(0, -170);
            cxt.lineTo(0, 10);
            cxt.stroke();
            cxt.closePath();


            //美化表盘，画中间的小圆
            cxt.beginPath();
            cxt.arc(0, 0, 5, 0, 360);
            cxt.fillStyle = "#1C86EE";
            cxt.fill();
            cxt.strokeStyle = "#1C86EE";
            cxt.stroke();
            cxt.closePath();

            //秒针上的小圆
            cxt.beginPath();
            cxt.arc(0, -140, 2, 0, 360);
            cxt.fillStyle = "#1C86EE";
            cxt.fill();
            cxt.stroke();
            cxt.closePath();
            cxt.restore();

            //显示时间
            // cxt.font = "18px 微软雅黑";
            // cxt.lineWidth = 2;
            // cxt.fillStyle = "#1C86EE";
            // hour=now.getHours();
            // var str = hour > 10 ? hour : ("0" + hour) + ":" + (min > 10 ? min : ("0" + min))
            // cxt.fillText(str, 225, 380);

            //中国制造
            // cxt.font = "12px 宋体";
            // cxt.lineWidth = 1;
            // cxt.fillText("Made In China", 210, 400);

            // cxt.font= "16px 微软雅黑";
            // cxt.lineWidth= "6";
            // cxt.fillStyle ="#171717"

            // ctx.font="30px Verdana";

            // var str = (hour > 10 ? hour : ("0" + hour)) + ":" + (min > 10 ? min : ("0" + min))+(sec > 10 ? sec: ("0"+sec) );
            // cxt.fillText(str,220,380);
        }

        drawClock();
        setInterval(drawClock, 1000);
    </script>
</body>
</html>
posted @ 2016-06-02 17:34  toto怎么会喝醉  阅读(194)  评论(0)  编辑  收藏  举报