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

巴特西

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

最新文章

热门文章