Html5的Canva绘制动态时钟显示当前时间！！！（附源码）

最新推荐文章于 2024-08-01 16:15:33 发布

小兔崽啊啊啊

最新推荐文章于 2024-08-01 16:15:33 发布

阅读量1k

点赞数 2

文章标签： js canvas html

本文链接：https://blog.csdn.net/yingshuangtu/article/details/119652567

版权

前言

canvas设计一个显示当前时间的时钟

实现情况

在这里插入图片描述

思路

想让canvas绘制的东西动起来，最直接的办法就是不停的进行重绘，可能刚开始有些人会担心效率的问题，害怕代码过长冗余，可读性差的问题，实际上将绘制目标封装在函数中，然后放置函数在定时器中，每秒钟调用一次就可以实现，
首先是创建绘画环境

var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');

获取当前系统时间，使用的是Data方法,

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

难点在于，秒针是需要每秒钟不停的转动的，秒针转动完了怎么让分针同步转动，同时带动时针转动一点点，实际上就是秒针

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        #canvas{
            margin:100px 500px;
            /* background-color: #ee4e68; */
        }
       
    
    </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 = "#000";
            //保存状态 坐标原点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 = "#b6c978";
            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 = "#e9e6b3";
            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, -160);
            context.stroke();
            context.restore();
            //中间的圆点
            context.beginPath();
            context.lineWidth = "10";
            context.strokeStyle = "#999";
            //顺时针false
            context.arc(250, 250, 5, 0, 360, false);
            context.stroke();
        }
 
        //绘制表盘
        function drawClock() {
            
            context.beginPath();
            context.lineWidth = "10";
            context.strokeStyle = "#b490d0";
            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++)
            {
               
                context.rotate( 1 / 6 * Math.PI);
                context.beginPath();
                // context.moveTo(0, -180);
                // context.lineTo(0, -200);
                context.moveTo(0, -170);
                context.lineTo(0, -190);
                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, -170);
                context.lineTo(0, -190);
                context.stroke();
 
                // context.restore();
            }
 
            //回复坐标原点为0,0
            context.restore();
        } 
    }
</script>