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>
巴特西

Javascript实现时钟

最新文章

热门文章
