Canvas制作简单的时钟表盘

最新推荐文章于 2024-09-19 19:11:07 发布

luckylbb

最新推荐文章于 2024-09-19 19:11:07 发布

阅读量257

点赞数

文章标签： canvas javascript

本文链接：https://blog.csdn.net/luckylbb/article/details/106751623

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="500" height="500" style="border: 1px solid red ;background:#000"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        var cxt = canvas.getContext('2d');
        function clock() {
            cxt.restore();
            cxt.clearRect(0, 0, canvas.width, canvas.height);
            var date = new Date();
            var hour = date.getHours();
            var min = date.getMinutes();
            var sec = date.getSeconds();
            hour = hour > 12 ? hour - 12 : hour;
            hour += (min / 60);
            xt.strokeStyle = "#00FFFF";
            cxt.lineWidth = 5;
            cxt.beginPath();
            cxt.arc(250, 250, 200, 0, 2 * Math.PI);
            cxt.stroke();
            cxt.closePath();
            cxt.save();
            cxt.translate(250, 250);
            cxt.strokeStyle = '#f00';
            cxt.lineWidth = 7;
            for (var i = 0; i < 12; i++) {
                cxt.rotate(30 * Math.PI / 180);
                cxt.beginPath();
                cxt.moveTo(0, -195);
                cxt.lineTo(0, -175);
                cxt.closePath();
                cxt.stroke();
            }
            cxt.restore();
            cxt.save();
            cxt.translate(250, 250);
            cxt.strokeStyle = '#f00';
            cxt.lineWidth = 5;
            for (var i = 0; i < 60; i++) {
                cxt.rotate(6 * Math.PI / 180);
                cxt.beginPath();
                cxt.moveTo(0, -195);
                cxt.lineTo(0, -185);
                cxt.closePath();
                cxt.stroke();
            }
            cxt.restore();
            cxt.save();
            cxt.strokeStyle = '#FFFF00';
            cxt.translate(250, 250);
            cxt.lineWidth = 7;
            cxt.rotate(hour * 30 * Math.PI / 180);
            cxt.beginPath();
            cxt.moveTo(0, -100);
            cxt.lineTo(0, 10);
            cxt.closePath();
            cxt.stroke();
            cxt.restore();
            cxt.save();
            cxt.lineWidth = 5;
            cxt.strokeStyle = 'blue';
            cxt.translate(250, 250);
            cxt.rotate(min * 6 * Math.PI / 180);
            cxt.beginPath();
            cxt.moveTo(0, -150);
            cxt.lineTo(0, 10);
            cxt.closePath();
            cxt.stroke();
            cxt.restore();
            cxt.save();
            cxt.lineWidth = 3;
            cxt.strokeStyle = '#FF0000';
            cxt.translate(250, 250);
            cxt.rotate(sec * 6 * Math.PI / 180);
            cxt.beginPath();
            cxt.moveTo(0, -170);
            cxt.lineTo(0, 10);
            cxt.closePath();
            cxt.stroke();
            cxt.beginPath();
            cxt.arc(0, 0, 7, 0, 2 * Math.PI);
            cxt.closePath();
            cxt.strokeStyle = "#ff0000";
            cxt.fillStyle = "#ffff00";
            cxt.fill();
            cxt.stroke();
            cxt.beginPath();
            cxt.arc(0, -140, 7, 0, 2 * Math.PI);
            cxt.closePath();
            cxt.strokeStyle = "#ff0000";
            cxt.fillStyle = "#ffff00";
            cxt.fill();
            cxt.stroke();
        }


        setInterval(clock, 900);
    </script>
</body>

</html>