用HTML5 Canvas打造高颜值动态时钟的创意实现

本文要分享的，是一次用代码复活时钟美学的尝试，重点介绍了animate-clock-canvas这个组件的基本知识和入门集成实战。

yelangking1

966人浏览 · 2026-02-01 10:21:12

yelangking1 · 2026-02-01 10:21:12 发布

前言

一、animate-clock-canvas简介

前言

在这个被数字设备包围的时代，时钟的形态经历了从机械到电子的深刻转变。然而，在手机锁屏和任务栏那些标准化的数字显示背后，我们是否还保留着对传统钟表美学的那份眷恋？那种指针匀速划过表盘的仪式感，那种罗马数字与精细刻度相得益彰的古典美，在追求效率的数字世界里显得尤为珍贵。本文要分享的，正是一次用代码复活时钟美学的尝试。通过HTML5 Canvas技术，将时间流逝的过程转化为一种视觉艺术。想象一下，在你的个人网站或作品集页面，一个优雅的模拟时钟静静转动——它的秒针平滑如丝绸，它的刻度在光影间呼吸，它的存在本身就在诉说着你对细节的执着。我们选择时钟作为创作对象，不仅因为它的普遍性，更因为它完美体现了数学与美学的交融。每一根指针的角度计算，每一个刻度的位置排布，都是理性逻辑与感性设计的对话。

在众多前端动画技术中，Canvas提供了一个几乎无限制的创作画布。它不像CSS动画那样受限于预定义的关键帧，也不像SVG那样在复杂动画中可能遇到性能瓶颈。Canvas将像素级的控制权完全交给了开发者，这让我们能够精准实现时钟所需的每一个细节。更重要的是，Canvas的实时渲染能力让时间的“流动感”成为可能。我们不仅要显示时间，更要模拟机械钟表那种连续、平滑的运动轨迹。通过结合JavaScript的Date对象获取毫秒级时间，配合三角函数计算旋转角度，我们能让秒针像真实钟表一样划过表盘——没有跳跃，只有流畅的过渡。这个时钟项目展示了Canvas的核心优势：完全的控制权。从表盘背景的渐变填充，到指针末端的圆角设计；从刻度的发光效果，到阴影的模糊程度——每一个视觉细节都由代码精确控制。这种控制力，让我们能够在代码中贯彻统一的设计语言，创造出既美观又高度一致的用户体验。

一、animate-clock-canvas简介

虽然在之前的博文中对基于Canvas的时钟绘制技术进行了简单的介绍，原文地址：基于Canvas的Html5多时区动态时钟实战，虽然功能基本达到，但是美观度还是需要持续提升。因此本文带着大家一起来学习一款颜值较高，效果比较酷炫的时钟应用。本节将重点介绍这款组件及其相关属性和函数的详细介绍。

1、开源地址

感兴趣的可以在Github上找到它的开源地址，animate-clock-canvas。在浏览器中输入地址后可以看到地址，虽然目前star数不是很多，但效果还是不错的。

animate-clock-canvas 是一个基于 HTML5 Canvas 的模拟时钟网页组件，该组件具有以下核心功能：

实时显示当前时间（时、分、秒）
可自定义的主题（白/黑主题）
三种指针样式可选（圆形、尖形、方形）
两种数字刻度类型（阿拉伯数字、罗马数字）
响应式设计，自动适应屏幕尺寸
可选的日期和星期显示
动态效果：可放大实时秒数显示
指针阴影效果
两种预设表盘样式

2、属性介绍

参数名称	说明	默认值	可选值
`theme`	主题颜色	`white`	`white`（白色主题）、`black`（黑色主题）
`pointerType`	指针类型	`rounded`	`rounded`（圆形指针）、`pointer`（尖形指针）、`rect`（方形指针）
`numberType`	刻度数字类型	`ALB`	`ALB`（阿拉伯数字）、`LM`（罗马数字）
`isSkipHourLabel`	是否跳过小时数显示分钟数	`0`	`0`（否）、`1`（是）
`isZoomSecond`	是否放大实时秒数	`0`	`0`（否）、`1`（是）
`isShowDetailInfo`	是否显示调试信息	`0`	`0`（否）、`1`（是）
`isShowWeekDate`	是否显示日期和星期	`1`	`0`（否）、`1`（是）
`isShowShadow`	是否显示指针阴影	`1`	`0`（否）、`1`（是）
`preset`	预设表盘样式	`0`	`0`（样式1）、`1`（样式2）

将源代码下载到本地之后，可以看到它的属性定义，如下所示：

通过这些属性，我们就可以灵活的控制时钟的展示效果和初始的日期等效果。

3、函数简介

与静态属性相关的就是动态函数，除了在页面上展示相关属性后，还需要对属性或者一些效果进行动态展示。这就需要用到函数的功能。本小节将对组件的函数进行一个简单的介绍，帮助大家对组件的能力有一个初步的认识：

constructor()：初始化时钟实例，接受所有配置参数
init()：初始化Canvas元素并开始绘制
draw()：主绘制方法，循环调用以实时更新时间
refreshSizes()：根据窗口大小调整时钟尺寸
updateFrameAttribute()：更新Canvas元素的属性
updateAllSizeWithPanelRadiusSize()：根据表盘半径调整所有元素尺寸
drawClockPanelHour/Minutes/Seconds()：绘制时、分、秒刻度
drawPointerHour/Minute/Second()：绘制时、分、秒指针
drawWeekAndDate()：绘制日期和星期
drawCenter()：绘制表盘中心点
showAllInfo()：显示调试信息

组件提供的方法不少，核心的实现均有详细的源码及注释。相信大家一看便理解，这里结合源码来介绍一下绘制的方法实现，即Draw方法：

 draw() {
    // 建立自己的时间参考线，消除使用系统时间时导致的切换程序后时间紊乱的情况
    this.timeLine = this.timeLine + 1
    // create clock
    let canvasClock = document.getElementById('clockLayer')
    let contextClock = canvasClock.getContext('2d')
    contextClock.clearRect(0, 0, this.configFrame.width, this.configFrame.height)
    // 背景，没有 bgColor 的时候，背景就是透明的
    if (this.configFrame.bgColor){
    }
    if (this.theme) {
        contextClock.fillStyle = THEME[this.theme].bg
        contextClock.fillRect(0, 0, this.configFrame.width, this.configFrame.height)
    }
    // 表盘
    this.drawClockPanelSeconds(contextClock, this.configFrame.center)
    this.drawClockPanelMinutes(contextClock, this.configFrame.center)
    this.drawClockPanelHour(contextClock, this.configFrame.center)
    // 参考线
    // this.drawRefLines(contextClock, this.configFrame.center)
    // 日期、星期
    if (this.isShowWeekDate){
        this.drawWeekAndDate(contextClock, this.configFrame.center)
    }
    // 指针
    this.drawPointerHour(contextClock, this.configFrame.center)
    this.drawPointerMinute(contextClock, this.configFrame.center)
    this.drawPointerSecond(contextClock, this.configFrame.center)
    // 中心点
    this.drawCenter(contextClock, this.configFrame.center)
    // 左下角显示所有参数值
    if (this.isShowDetailInfo){
        this.showAllInfo(contextClock)
    }
    if (this.isPlayConstantly) {
        window.requestAnimationFrame(() => {
            this.draw()
        })
    }
}

在源码中可以看到这个时钟是如何绘制出来的，包括表盘背景的设置、表盘的绘制、如何绘制日期，时针、分针、秒针是如何绘制，以及如何让时钟动起来的。篇幅有限，这里不全部列出，大家可以将源代码下载后，自己深入看一下就大概了解原理了。

二、入门集成

在对组件有了一个基本的认识之后，下面我们来基于组件进行一个简单的实例集成。看看如何在网页上展示动态时钟。

1、基本使用

在网页中使用组件的方法比较简单，这里使用原生html和javascript的方式。在网页中引入js资源，代码如下:

<script src="animate-clock-canvas-browser.js"></script>

然后在javascript中就可以创建时钟对象，js核心代码如下：

// 创建默认白色主题的时钟
const clock = new AnimateClockCanvas();

// 创建黑色主题的时钟
const clock = new AnimateClockCanvas('black');

// 创建自定义配置的时钟
const clock = new AnimateClockCanvas(
    'white',        // 主题
    'pointer',      // 指针类型
    'LM',           // 数字类型（罗马数字）
    '0',            // 是否跳过小时标签
    '1',            // 是否放大秒数
    '0',            // 是否显示调试信息
    '1',            // 是否显示日期星期
    '1',            // 是否显示阴影
    '0'             // 预设样式
);

通过这种方式就可以创建一个时钟，并且在页面上展示出来。

2、成果展示

首先来看一下默认的时钟展示效果，背景是一个白色的时钟，效果如下图：

再来看一个暗黑的主题时钟：

可以根据自己的需要来灵活调整,比如尖型指针：

又或者希望将表盘布局设置更加个性化：

3、一些不足

这个组件功能比较强大，但是扩展性还是可以进一步增强的。比如更好的响应式支持以及能支持更多样化的创建。比如想要在网页上常见更多的组件等等，这些都是需要自己自行去扩展的，本文先对其特性进行介绍，以上不足，将在后续文章中进行介绍。

三、总结

以上就是本文的主要内容，本文要分享的，是一次用代码复活时钟美学的尝试。通过HTML5 Canvas技术，将时间流逝的过程转化为一种视觉艺术。文章首先介绍了animate-clock-canvas这个组件，围绕开源地址、属性及其函数的详细介绍，然后重点介绍了组件的基本使用方式和效果展示，当大家掌握如何进行集成使用，同时展示了几个常见的效果。行文仓促，定有不足之处，欢迎各位朋友在评论区批评指正，不胜感激。