使用canvas绘制时钟

最新推荐文章于 2024-04-20 19:07:05 发布

timelessmemoryli

最新推荐文章于 2024-04-20 19:07:05 发布

阅读量1.2k

点赞数 1

分类专栏： js 文章标签： canvas 时钟

本文链接：https://blog.csdn.net/u014788227/article/details/52251825

版权

js 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            background-color: #DDFFF8;
        }

        .container {
            width: 500px;
            height: 500px;
            margin: 0 auto;
        }

        canvas {
            background-color: #DDFFe4;
        }
    </style>
</head>
<body>
    <div class="container">
        <canvas id="canvas" width="500" height="500"></canvas>
    </div>
</body>
</html>
<script type="text/javascript">
    window.onload = function()
    {
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext('2d');

        runClock();
        var timer = setInterval(runClock, 1000);

        //运行
        function runClock() {
            //清除之前的绘画
            context.clearRect(0, 0, canvas.width, canvas.height);

            drawClock();
            
            var now = new Date();
            var hour = now.getHours() > 12 ? now.getHours() - 12 : now.getHours();
            var min = now.getMinutes();
            var sec = now.getSeconds();

            // 时针
            context.lineWidth = "15";
            context.strokeStyle = "#94E0F3";
            //保存状态 坐标原点0,0
            context.save();
            //移动画布，改变坐标原点为250,250
            context.translate(canvas.width / 2, canvas.height / 2);
            context.rotate((hour + min / 60 + sec / 3600 ) / 6 * Math.PI);
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(0, -110);
            context.stroke();
            //恢复状态 坐标原点回到0,0
            context.restore();

            //分针
            context.lineWidth = "10";
            context.strokeStyle = "#8CFBA2";
            context.save();
            context.translate(canvas.width / 2, canvas.height / 2);
            context.rotate((min + sec / 60) / 30 * Math.PI);
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(0, -130);
            context.stroke();
            context.restore();

            //秒针
            context.lineWidth = "5";
            context.strokeStyle = "#33FFD6";
            context.save();
            context.translate(canvas.width / 2, canvas.height / 2);
            context.rotate(sec / 30 * Math.PI);
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(0, -150);
            context.stroke();
            context.restore();

            context.beginPath();
            context.lineWidth = "10";
            context.strokeStyle = "#fe9901";
            context.arc(250, 250, 5, 0, 360, false);
            context.stroke();
        }

        //绘制表盘
        function drawClock() {
            
            context.beginPath();
            context.lineWidth = "10";
            context.strokeStyle = "#fe9901";
            context.arc(250, 250, 200, 0, 360, false);
            context.stroke();

            //下面要改变原点 所以先保存当前状态
            context.save();

            //改变原点
            context.translate(canvas.width / 2, canvas.height / 2);

            //时刻度
            for (var i = 1; i <= 12; i++)
            {
                //此处画布一直在旋转，但由于循环后旋转了360度，对之前状态没有影响,所以可以不进行save和restore
                // context.save();
                // context.rotate(i * 30 / 180 * Math.PI);
                context.rotate( 1 / 6 * Math.PI);
                context.beginPath();
                context.moveTo(0, -180);
                context.lineTo(0, -200);
                context.stroke();

                // context.restore();
            }

            //分秒刻度
            context.lineWidth = "5";
            for (var i = 1; i <= 60; i++)
            {
                // context.save();
                // context.rotate(i * 6 / 180 * Math.PI);
                context.rotate( 1 / 30 * Math.PI);
                context.beginPath();
                context.moveTo(0, -190);
                context.lineTo(0, -200);
                context.stroke();

                // context.restore();
            }

            //回复坐标原点为0,0
            context.restore();
        } 
    }
</script>

timelessmemoryli

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用canvas绘制时钟

canvas * { padding: 0; margin: 0; } html, body { width: 100%; height: 100%; background-color: #DDFFF8;
复制链接

扫一扫