Html5画钟表盘/指针实时跳动

最新推荐文章于 2021-06-15 11:48:03 发布

weixin_30641465

最新推荐文章于 2021-06-15 11:48:03 发布

阅读量176

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/zhanqun/p/5736060.html

1、最终效果
　　时钟、分钟、秒指针连续移动

2、完整代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Clock in canvas</title>
    <script type="text/javascript" charset="utf-8" src="Scripts/Jquery/jquery-1.9.1.min.js"></script>
    <script>
        $(function () {
            var container = $('.container');
            var clockPanel = $('.clockPanel', container).get(0);
            var ctx = clockPanel.getContext('2d');

            var r = 100;
            var point = { X: 150, Y: 150 };
            drawCircle(ctx, point, r);

            var clockPointer = $('.clockPointer', container).get(0);
            var ctxPointer = clockPointer.getContext('2d');


            var run = function () {
                drawPointer(ctxPointer, point, r, new Date());
                requestAnimFrame(run);
            }
            run();
        })

        function drawCircle(ctx, point, r) {
            ctx.beginPath();
            ctx.arc(point.X, point.Y, r, 0, Math.PI * 2, true);
            ctx.stroke();

            ctx.beginPath();
            ctx.arc(point.X, point.Y, 4, 0, Math.PI * 2, true);
            ctx.fillStyle = "#ccc";
            ctx.fill();
            ctx.closePath();
            for (var i = 0; i < 60; i++) {
                drawScale(ctx, point, r, 5, i);
            }
        }

        function drawScale(ctx, point, r, len, scale) {
            var angle = 360 * scale / 60 * 2 * Math.PI / 360

            if (scale % 5 == 0) {
                len = len + 3
                ctx.lineWidth = 3;
            }
            else {
                ctx.lineWidth = 1;
            }
            var sX = point.X - (r - len) * Math.sin(angle);
            var sY = point.Y - (r - len) * Math.cos(angle);
            var eX = point.X - r * Math.sin(angle);
            var eY = point.Y - r * Math.cos(angle);

            ctx.beginPath();
            ctx.strokeStyle = "#ccc";
            ctx.moveTo(sX, sY);
            ctx.lineTo(eX, eY);
            ctx.stroke();
            ctx.closePath();
        }

        function drawPointer(ctx, point, r, time) {
            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
            var hours = time.getHours();
            var minutes = time.getMinutes();
            var seconds = time.getSeconds();
            var minSec = time.getMilliseconds();
            var angleS = 2 * Math.PI * (60 * 1000 - seconds * 1000 - minSec) / (60 * 1000);
            var esX = point.X - (r - 5) * Math.sin(angleS);
            var esY = point.Y - (r - 5) * Math.cos(angleS);

            var eSec = { X: esX, Y: esY };
            drawLine(ctx, point, eSec, 1);

            var angleM = 2 * Math.PI * (60 * 60 - minutes * 60 - seconds) / (60 * 60);
            var emX = point.X - (r - 10) * Math.sin(angleM);
            var emY = point.Y - (r - 10) * Math.cos(angleM);

            var eMinu = { X: emX, Y: emY };
            drawLine(ctx, point, eMinu, 2);

            var angleH = 2 * Math.PI * ((24 * 60 * 60 - hours * 60 * 60 - minutes * 60 - seconds) % (12 * 60 * 60)) / (12 * 60 * 60);
            var ehX = point.X - (r - 15) * Math.sin(angleH);
            var ehY = point.Y - (r - 15) * Math.cos(angleH);

            var eHour = { X: ehX, Y: ehY };
            drawLine(ctx, point, eHour, 3);
        }

        function drawLine(ctx, pointS, pointE, lineWidth) {
            ctx.lineWidth = lineWidth;
            ctx.beginPath();
            ctx.strokeStyle = "#808080";
            ctx.moveTo(pointS.X, pointS.Y);
            ctx.lineTo(pointE.X, pointE.Y);
            ctx.stroke();
            ctx.closePath();
        }

        window.requestAnimFrame = (function () {
            return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function (run) {
                window.setTimeout(run, 16);
            };
        })();
    </script>
    <style>
        .container {
            width: 300px;
            height: 300px;
            /*background: orange;*/
            margin: 0 auto;
            position: relative;
        }

        canvas {
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="container">
        <canvas class="clockPanel" height="300" width="300"></canvas>
        <canvas class="clockPointer" height="300" width="300"></canvas>
    </div>
</body>
</html>

3、实现重点

　　　　window.requestAnimFrame = (function () {
            return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function (run) {
                window.setTimeout(run, 16);
            };
        })();

转载于:https://www.cnblogs.com/zhanqun/p/5736060.html