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

时间：2022-05-31 05:35:34
1、最终效果
　　时钟、分钟、秒指针连续移动
Html5画钟表盘/指针实时跳动
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);

            };

        })();




 
相关文章