HTML5 之Canvas 绘制时钟 Demo

<!DOCTYPE html>
<html>
<head>
    <title>Canvas 之 时钟 Demo</title>
    <!--简单 样式模版-->
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
            font-family: YaHei Consolas Hybrid,宋体;
            font-size: 14px;
            list-style: none;
        }
        .wrapper
        {
            margin: 50px auto;
            width: 400px;
            padding: 10px;
            border: solid 1px gray;
            background-color: #eee;
            overflow:auto;
        }/*H1浅蓝阴刻字*/
        body
        {
            background-color: gray;
        }
        h1
        {
            text-align: center;
            display: block;
            background-color: #C4DEF7;
            color: #344251;
            font: normal 30px "微软雅黑";
            text-shadow: 1px 1px 0px #DEF3FF;
            padding: 5px 0px;
            margin:10px;
            box-shadow: 0px 2px 6px #000;
            border-radius:10px;
        }
        input[type='button'],input[type='submit'] { padding:2px 5px;}
        
        #clockMap { background-color:White;}
        </style>
</head>
<body>
    <h1>
        Canvas 之 时钟 Demo
    </h1>
    <div class="wrapper">
        <canvas width="400" height="400" id="clockMap"></canvas>
        <script type="text/javascript">
            //获取画面DOM对象
            var canvas = document.getElementById("clockMap");
            //获取2D画布的上下文
            var map = canvas.getContext("2d");

            //格式化时间格式为00:00:00来显示
            var formatTime = function (time) {
                return time < 10 ? "0" + time : time;
            }

            //注意：在画时分秒的针时，一定要先保存环境，画完再回到环境中，不能一次画三针
            var drawClock = function () {
                //清屏
                map.clearRect(0, 0, 400, 400);
                //保存当前环境
                map.save();

                //绘制表盘
                map.beginPath();
                map.lineWidth = 10;
                map.storkeStyle = "black";
                map.arc(200, 200, 150, 0, 360, true);
                map.stroke();
                map.closePath();

                //绘制刻度
                map.translate(200, 200);
                for (var i = 0; i < 60; i++) {
                    if (i % 5 == 0) {
                        map.beginPath();
                        map.lineWidth = 4;
                        map.strokeStyle = "red";
                        map.moveTo(135, 0);
                        map.lineTo(143, 0);
                        map.stroke();
                        map.closePath();
                    }
                    else {
                        map.beginPath();
                        map.lineWidth = 2;
                        map.strokeStyle = "black";
                        map.moveTo(140, 0);
                        map.lineTo(143, 0);
                        map.stroke();
                        map.closePath();
                    }
                    map.rotate(6 * Math.PI / 180);
                }

                //绘制数字
                map.textAlign = "center";
                map.textBaseline = "middle";
                map.font = "bold 30px Arial";
                map.fillText("3", 115, 0);
                map.fillText("6", 0, 115);
                map.fillText("9", -115, 0);
                map.fillText("12", 0, -115);

                //========绘制时针，分针，秒针========
                //获取当前时间
                var date = new Date();
                var hours = date.getHours();
                var minute = date.getMinutes();
                var seconds = date.getSeconds();
                hours = hours > 12 ? hours - 12 : hours;
                var hour = hours + minute / 60;

                //绘制时针
                map.save();
                map.beginPath();
                map.rotate((hour * 30 - 90) * Math.PI / 180);
                map.lineWidth = 6;
                map.moveTo(-10, 0);
                map.lineTo(90, 0);
                map.closePath();
                map.stroke();
                map.restore();

                //绘制分针
                map.save();
                map.beginPath();
                map.rotate((minute * 6 - 90) * Math.PI / 180);
                map.lineWidth = 4;
                map.moveTo(-10, 0);
                map.lineTo(132, 0);
                map.closePath();
                map.stroke();
                map.restore();

                //绘制秒针
                map.save();
                map.beginPath();
                map.rotate((seconds * 6 - 90) * Math.PI / 180);
                map.lineWidth = 2;
                map.strokeStyle = "red";
                map.moveTo(-10, 0);
                map.lineTo(138, 0);
                map.closePath();
                map.stroke();
                map.restore();

                //中心点
                map.save();
                map.beginPath();
                map.arc(0, 0, 4, 0, 360, true);
                map.closePath();
                map.lineWidth = 2;
                map.strokeStyle = "red";
                map.fill();
                map.stroke();
                map.restore();

                //时间显示
                map.save();
                map.font = "24px Arial";
                map.fillText("当前时间："+formatTime(hours) + ":" + formatTime(minute) + ":" + formatTime(seconds), -1, -180);
                map.restore();

                //将画好的时钟显示在之前保存的环境中
                map.restore();
            }

            //加载时，执行一次，避免刷新时，有一秒的延迟
            drawClock();

            //开启定时器
            window.setInterval(drawClock, 1000);
        </script>
    </div>
</body>
</html>

效果图：

posted @ 2013-11-08 00:23 TOGGLE 阅读(465) 评论(0) 收藏举报

刷新页面返回顶部

前端TOGGLE

HTML5 之Canvas 绘制时钟 Demo