网页设计特效-倒计时动画（canvas+js实现）

最新推荐文章于 2022-02-28 10:24:43 发布

原创

最新推荐文章于 2022-02-28 10:24:43 发布 · 802 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了一个使用canvas和javascript实现的倒计时动画特效，通过创建画布，绘制数字和彩色小球的下落，详细阐述了实现过程。项目包括digit.js、countdown.js和index.html三个文件，涉及数字数组、时间获取、小球绘制及动画更新等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目github地址：https://github.com/llllllllr/CountDown-digits

这是一个canvas的网页特效，做一个倒计时的效果并让彩色小球向下滚动。下面是实现过程：

整个项目有三个文件，分别为digit.js，countdown.js和index.html文件，我们先在html文件里面声明一个画布，并指定大小

<body>
<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;background-color: black" ></canvas>
<script src="digit.js"></script>
<script src="countdown.js"></script>
</body>

接着我们看应该如何绘制时间：

在digit.js里面是一些数字的数组：

digit =
    [
        [
            [0,0,1,1,1,0,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,0,1,1,0],
            [0,0,1,1,1,0,0]
        ],//0
        [
            [0,0,0,1,1,0,0],
            [0,1,1,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],