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

最新推荐文章于 2022-04-18 19:55:55 发布

小兔崽啊啊啊

最新推荐文章于 2022-04-18 19:55:55 发布

阅读量1.2k

点赞数 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>
<

最低0.47元/天解锁文章