使用 <canvas> 制作浏览器内的 LED 显示屏：我该如何创建角色？答案

【问题标题】：Making an in-browser LED display with <canvas>: how do I go about creating characters?使用 <canvas> 制作浏览器内的 LED 显示屏：我该如何创建角色？
【发布时间】：2012-05-06 00:16:51
【问题描述】：

我的浏览器内 LED Display 对象有 LED 对象存储在它的 map 属性中。每个LED 都有x 和y 属性，以便知道它在画布上的位置，而map 是LEDs（可以是不同大小）的二维数组，将它们映射到Display 矩阵。显示对象还具有定义 LED 区域和它们之间的空间的属性。

显示器应该能够显示来自预制字体的字符，例如数字和字母。

我无法理解的是：显示字符的最佳方式是什么？例如，下面是字母“S”的示例（. 是 LED 显示屏关闭，O 是 LED 显示屏打开：

..OO..
.OOOO.
OO..OO
OO....
.OO...
..OO..
...OO.
OO.OO.
.OOO..
..OO..

我应该如何映射要打开哪些 LED？

我当前的解决方案是：创建一个 Character 对象，该对象具有属性 x 和 y（确定它在显示矩阵上的位置）和 width 和 height（确定它在 LED 中的区域）。然后将应该打开的 LED 映射到 2D 阵列中。当我们需要显示一个字符时，我们得到Character 的x 和y，找到“源”LED，然后按照映射打开LEDs。

有没有更好的方法？也许使用路径？

【问题讨论】：

除非您想要矢量图形，否则这听起来是最好的方法。

标签： javascript html canvas fonts led

【解决方案1】：

根据你的描述，我不能完全确定你是如何做到的，但根据我认为你所追求的，我会这样做。

第一步，将你的所有角色放在数组中，定义哪些点需要打开或关闭 LED。如果这将是一个大集合，您可以尝试一些技术来压缩数据。

根据画布上 LED 的大小，我可以创建一个函数来计算哪些 LED 需要更换，并且只擦除需要更换 LED 的显示屏。一次预渲染 LED（开和关状态），就像 openGL 中的显示列表（参见下面的链接）。

否则，如果屏幕上的字符本身非常小并且数量很多，我会预先渲染每个完整的字符并像字体一样使用。这将需要更多地清除屏幕，但如果有数百个 LED，则计算和显示清除的开销可能会很高。

这个页面有一些关于高效画布渲染的好信息： http://www.html5rocks.com/en/tutorials/canvas/performance/

我假设 LED 是在程序中呈现的，而不仅仅是图像？如果它们只是图像，那么您已经有效地预渲染了 LED。

【讨论】：

澄清一下，当我说“预渲染”时，我的意思是在浏览器中的屏幕外画布上。请参阅 html5rocks 链接了解如何执行此操作。

【解决方案2】：

据我了解，您正在尝试使用“像素化”的 LED 显示屏。所以基本上，将你的字符存储为像素数组似乎是定义它们的最佳方式......我真的不明白你的问题是什么。

如果您的问题是关于获取像素图，您可以做的一件事是获取一个类似字体的像素，在屏幕外画布上绘制一个字符，获取像素数据，然后使用它们创建角色的像素图。然后你可以做一个循环来映射所有角色，而不必自己创建每个地图......

【讨论】：