基于canvas的粒子时钟 --- js特效

前言：写在前面的话

什么是粒子时钟，听上去好高尚的样子。☺。起始也就那样。话不多说，先来张效果图。

感觉是不是还行，怎样做的呢，其实也很简单。再来一张图。

看了这个图片，是不是大致懂了，这个效果是怎么来的，其实说起来有点像，计算机的成像了。你所看到的图片，各种形状，其实都是一个一个像素点组成的。这里的数字也是用的这种方法，实现的。将画出一个数字，转变为画每一个像素点。这也用到了数学建模的思想。我们来看一下2这个数字对应的模型吧.

[
    [0, 0, 1, 1, 1, 0, 0],
    [0, 1, 1, 1, 1, 1, 0],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [9, 0, 0, 0, 1, 1, 0],
    [0, 0, 0, 1, 1, 0, 0],
    [0, 0, 1, 1, 0, 0, 0],
    [0, 1, 1, 0, 0, 0, 0],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 1, 1, 1, 1, 1],
],

我这里，采用如果对应的位置为1就画一个圆形采用的方法是canvas里面的ctx.arc(x, y, r, 0, 2 * Math.PI)这个方法，画出一个圆形像素点。

好了到这里，基本的数字显示是不是就搞清楚了。那么如何让这个时钟走起来呢？起始也很简单，你是不是也想到了，对，就是setInterval(func, millsec);方法，然后，通过new Date()来获取时间，这里，我写了一个方法，就是将20:35:21这样的字符串转变为，对应的粒子数字，方法为show

这里还用到了闭包的技术，用来检查是否浏览器支持canvas

第一部分：粒子时钟的核心类

类的主要属性：

1. this.fg = fg; // 前景色
2. this.bg = bg; // 背景色
3. this.ctx = canvas.getContext("2d"); // canvas ctx
4. this.timeId = null; // 时间interval id
5. this.w = w; // 宽度
6. this.h = h; // 高度
7. this.cell = this.w / 90; // 小室宽度
8. this.r = this.cell / 2; // 像素圆半径
9. this.data: 里面存放了数字与像素点之间的映射数组

类的主要方法：
11. drawOneSym: 画出一个符号
12. showData : 显示所有的数字和:符号
13. showTime: 显示当前的时间动态的，最主要的方法，里面是一个定时器，调用了this.show()方法
14. show: 显示当前的时间静态的，里面涉及到了，字符串时间，转变为，粒子像素。
15. stopShowTime: 停止动态显示时间，起始就是一个closeInterval(timeId);方法

第二部分：原码

clock.js

/** 数字时钟 **/
function checkCanvas(canvas) {
   
    // ---------------- 这行是否支持 canvas 检查 ----------------
    if (!canvas.getContext) return;
    // ---------------- 支持，返回一个对象构造器 ----------------
    return function (w, h, fg, bg) {
   
        if (!fg) fg = "green";
        if (!bg) bg = "rgba(0, 0, 200, 0.5)";
        this.fg = fg; // 前景色
        this.bg = bg; // 背景色
        this.ctx = canvas.getContext("2d"); // canvas ctx
        // 填充背景色
        // this.ctx.fillStyle = bg;
        // this.ctx.fillRect(0, 0, w, h);
        this.timeId = null; // 时间interval id
        this.w = w; // 宽度
        this.h = h; // 高度
        this.cell = this.w / 90; // 小室宽度
        this.r = this.cell / 2; // 像素圆半径
        this.data = {
   
            num: [
                // 0
                [
                    [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],
                ],
                // 1
                [
                    [0, 0, 0, 1, 1, 0, 0],
                    [0, 1, 1, 1, 1, 0, 0],
                    [0, 0, 0, 1, 1, 0, 0],