Javascript 使用<；画布>；：我如何开始创造角色？

My in browser LED

Display

对象的

LED

对象存储在其

map

属性中。每个

LED

都有

x

和

y

属性，以便知道它在画布上的位置，而

map

是

LED

的2D数组（可以有不同的大小），将它们映射到

显示

矩阵上。显示对象还具有定义LED区域和它们之间空间的属性

显示器应该能够显示预先制作的字体中的字符，如数字和字母

我无法理解的是：显示字符的最佳方式是什么？例如，下面是字母“S”的外观示例（

是否关闭LED显示屏，

O

是否打开LED显示屏：

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

我应该如何映射要打开的LED

我目前的解决方案是：创建一个

字符

对象，该对象具有属性

x

和

y

（确定其在显示矩阵上的位置）和

宽度

和

高度

（确定其在LED中的面积）。应该打开的LED随后映射到2D数组中。当我们需要显示字符时，我们将获得

字符
x
和
y
，找到“源”LED，然后按映射打开
LED

有没有更好的方法？也许是使用路径？
从你的描述中，我不能完全确定你是如何做到的，但根据我认为你在追求的东西，我会这样做

第一步，在数组中计算出所有字符，定义哪些点需要打开或关闭LED。如果这是一个大集合，您可以尝试一些技术来压缩数据

根据画布上LED的大小，我会创建一个函数来计算哪些LED需要更改，并且只在有LED需要更改的地方擦除显示。预渲染LED（打开和关闭状态）一次，就像openGL中的显示列表一样（见下面的链接）

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

本页提供了有关高效画布渲染的一些有用信息：

我假设LED是在程序中渲染的，而不仅仅是图像？如果它们只是图像，那么您已经有效地预渲染了LED。
据我所知，您正在尝试使用“像素化”LED显示屏。
因此，基本上，将字符存储为像素数组似乎是定义它们的最佳方式……我真的不明白你的问题是什么

如果你的问题是获取像素贴图，你可以做的一件事是获取像素字体，在屏幕外画布上绘制角色，获取像素数据，然后使用它们创建角色的像素贴图。然后你可以循环映射所有角色，而无需自己创建每个贴图…
除非你需要矢量graphics，这听起来是最好的方法。为了澄清，当我说“预渲染”时，我指的是在屏幕外画布上的浏览器中。有关如何做到这一点，请参阅html5rocks链接。