Canvas 绘制一个像素风电子时钟

想法是在 Canvas 上绘制由小方块组成的数字。

第一步是实现绘制小方块的方法，先画出一个边长为 5 的 10x10 个方块，使用两个 for 循环很简单就能完成。

 for (let i = 0; i < 10; i++) {
     for (let j = 0; j < 10; j++) {
         context.fillRect(5 * i, 5 * j, 5, 5);
     }
 }

效果如下：

但是这样一大块黑色不是很好看，可以把小方块的边长减一 ，有显示网格的效果，即： context.fillRect(5 * i, 5 * j, 4, 4);

效果如下：

 

接下来就是把数字转换成像素风，我的想法是创建一个数组，用 0 和 1 来表示是否填充，然后遍历数组。

如 1 为： ["0010", "0110", "0010", "0010", "0111"] ，下图所示方便理解：

 

为之前的循环增加一个判断，遍历字符串的索引判断是否要在相应位置绘制小方块。

x，y 是整个数字的原点（数字的左上角）。

 function draw_single_word(context, x, y, numberList) {
     for (let i = 0; i < numberList.length; i++) {
         for (let j = 0; j < numberList[i].length; j++) {
             if (numberList[i][j] === "1") {
                 context.fillRect(x + 5 * y + j, 5 * i, 4, 4);
             }
         }
     }
 }

显示效果：

类似的其他数字也可以显示，还可以加上冒号和破折号。

 function pixelNumber(number) {
     let _number = number;
     switch (_number) {
         case "0":
             _number = ["1111", "1001", "1001", "1001", "1111"];
             break;
         case "1":
             _number = ["0010", "0110", "0010", "0010", "0111"];
             break;
         case "2":
             _number = ["1111", "0001", "1111", "1000", "1111"];
             break;
         case "3":
             _number = ["1111", "0001", "1111", "0001", "1111"];
             break;
         case "4":
             _number = ["1001", "1001", "1111", "0001", "0001"];
             break;
         case "5":
             _number = ["1111", "1000", "1111", "0001", "1111"];
             break;
         case "6":
             _number = ["1111", "1000", "1111", "1001", "1111"];
             break;
         case "7":
             _number = ["1111", "0001", "0001", "0001", "0001"];
             break;
         case "8":
             _number = ["1111", "1001", "1111", "1001", "1111"];
             break;
         case "9":
             _number = ["1111", "1001", "1111", "0001", "1111"];
             break;
         case ":":
             _number = ["0", "1", "0", "1", "0"];
             break;
         case "-":
             _number = ["000", "000", "111", "000", "000"];
             break;
         case ".":
             _number = ["0", "0", "0", "0", "1"];
             break;
         case " ":
             _number = ["0", "0", "0", "0", "0"];
             break;
     }
     return _number;
 }

pixelNumber(number)

如下所示为数字 1-9 和 0

 

多个字符的话，可以遍历字符逐一调用刚才的 draw_single_word 函数画出。

只要在每个字符的 X 轴坐标上增加上一个字符的宽度，就可以防止几个字符重叠在一起。为了让字符不显得太挤，我增加了一个格子的宽度。

需要注意的是，我设置的 “:” 和 “-” 字符宽度只有三格，因此要在循环外创建 width 函数。

 function draw_words(context, x, y, text) {
     let width = 0;
     for (let i = 0; i < text.length; i++) {
         let numberList = pixelNumber(text[i]);
         draw_single_word(context, x + width, y, numberList);
         width += (numberList[0].length + 1) * 5;
     }
 }

效果如下：

 

现在可以获取当前时间，并将字符绘制出来，获取当前时间的函数：

 function getTime() {
     let date = new Date();
     let year = date.getFullYear();
     let month = zeroNumber(date.getMonth() + 1); // 注意月份默认从 0 开始，所以加一才是正确的
     let day = zeroNumber(date.getDate());
     let hour = zeroNumber(date.getHours());
     let minutes = zeroNumber(date.getMinutes());
     let seconds = zeroNumber(date.getSeconds());
     return {
         date: year + "-" + month + "-" + day,
         time: hour + ":" + minutes + ":" + seconds
     }
 }

为了美观，我创建了一个 zeroNumber 函数来给不足十的数字前加一个零。

 function zeroNumber(number) {
     number = number < 10 ? "0" + number : number;
     return number;
 }

zeroNumber(number)

 

最后，使用 requestAnimationFrame 函数让它动起来。

 function time_animate() {
     ctx_animate.clearRect(0, 0, 200, 60);
     draw_words(ctx_animate, 0, 0, getTime().time);
     window.requestAnimationFrame(time_animate);
 }
 time_animate();

其实修改一下，也可显示其他东西，比如字母和简单符号。

最后贴一下我左上角的时间的代码，这是最初的版本，可能有些许问题，顺便说一句，IE不支持 class 。

 class PixelTime {
     constructor(canvas) {
         this.canvas = canvas;
         this.context = this.canvas.getContext("2d");
         this.dateShow = 1; // 是否显示年
         this.timeShow = 1; // 是否显示时间
         this.pixelSide = this.canvas.width < 102 ? 2 : Math.floor(this.canvas.width / 51);
     }
     /**
      * 确定字符的点阵数组。
      */
     pixelNumber(number) {
         switch (number) {
             case 0:
                 number = ["1111", "1001", "1001", "1001", "1111"];
                 break;
             case 1:
                 number = ["0010", "0110", "0010", "0010", "0111"];
                 break;
             case 2:
                 number = ["1111", "0001", "1111", "1000", "1111"];
                 break;
             case 3:
                 number = ["1111", "0001", "1111", "0001", "1111"];
                 break;
             case 4:
                 number = ["1001", "1001", "1111", "0001", "0001"];
                 break;
             case 5:
                 number = ["1111", "1000", "1111", "0001", "1111"];
                 break;
             case 6:
                 number = ["1111", "1000", "1111", "1001", "1111"];
                 break;
             case 7:
                 number = ["1111", "0001", "0001", "0001", "0001"];
                 break;
             case 8:
                 number = ["1111", "1001", "1111", "1001", "1111"];
                 break;
             case 9:
                 number = ["1111", "1001", "1111", "0001", "1111"];
                 break;
             case ":":
                 number = ["0", "1", "0", "1", "0"];
                 break;
             case "-":
                 number = ["000", "000", "111", "000", "000"];
                 break;
             case ".":
                 number = ["0", "0", "0", "0", "1"];
                 break;
             case " ":
                 number = ["0", "0", "0", "0", "0"];
                 break;
         }
         return number;
     }

     /**
      * 绘制点阵。
      */
     drawPixelWord(x, y, words) {
         let width = 0;
         for (let i = 0; i < words.length; i++) {
             let word = parseInt(words[i]) || words[i] === "0" ? parseInt(words[i]) : words[i];
             word = this.pixelNumber(word);
             for (let r = 0; r < word.length; r++) {
                 for (let c = 0; c < word[r].length; c++) {
                     if (word[r][c] === "1") {
                         let side = this.pixelSide - 1;
                         this.context.save();
                         this.context.translate(x + width + this.pixelSide * 2, y + this.pixelSide * 2);
                         this.context.fillRect(c * (side + 1), r * (side + 1), side, side);
                         this.context.restore();
                     }
                 }
             }
             width += (1 + word[0].length) * this.pixelSide;
         }
     }

     /**
      * 给个位数前面加个零，如：01
      * @param number {number}
      * @returns {number}
      */
     zeroNumber(number) {
         number = number < 10 ? "0" + number : number;
         return number;
     }

     /**
      * 获取当前时间。
      * @returns {{date: string, time: string}}
      */
     getTime() {
         let date = new Date();
         let year = date.getFullYear();
         let month = this.zeroNumber(date.getMonth() + 1); // 月份默认从 0 开始
         let day = this.zeroNumber(date.getDate());
         let hour = this.zeroNumber(date.getHours());
         let minutes = this.zeroNumber(date.getMinutes());
         let seconds = this.zeroNumber(date.getSeconds());
         return {
             date: year + "-" + month + "-" + day,
             time: hour + ":" + minutes + ":" + seconds
         }
     }

     drawTime() {
         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
         let now = this.getTime();
         if (this.dateShow && this.timeShow) {
             this.drawPixelWord(0, 0, now.date);
             this.drawPixelWord(this.pixelSide * 14, this.pixelSide * 6, now.time);
         } else if (this.dateShow) {
             this.drawPixelWord(0, 0, now.date);
         } else if (this.timeShow) {
             this.drawPixelWord(0, 0, now.time);
         }
     }
 }

PixelTime