javascript - 我正在制作浏览器内的单色 LED 显示屏。我应该使用 还是 来显示 LED？

Question

我正在制作浏览器内的单色“LED”显示屏。它应该有一个由 33 x 278 个“LED”组成的矩阵，每个 LED 都是 3 x 3 个“真实”像素。它将用于以 HH:MM 格式显示进度条和当前时间，或以“NN 天”格式显示剩余天数。它还将是可调的(用户将能够设置时间)。

我看到有两种方法可以做到这一点:

1. 使用<canvas>并用它绘制“LED”。
2. 使用 <div>对于每个“LED”。我觉得我可以更好地控制每个“LED”，但想到将近 10 000 个 div这让我有些害怕。

我想知道这些方法中哪种更好，为什么。或者还有其他方法吗？

Answer 1

10,000 个 div 应该吓到你。其中每一个，尽管只是一个很小的像素，都会被浏览器存储许多未定义的 html 属性以及内部浏览器属性，这些都占用内存。此外，每个 div 都需要由浏览器“流动”或以图形方式定位，这会占用计算时间。

对于像素级可修改图形，您应该使用 canvas，这是它们的设计和优化目的。

这是一个在 Canvas 上随机绘制 3x3“像素”的快速 canvas 演示:

http://jsfiddle.net/jtbowden/feusZ/

真的没有那么多代码，也不太难。一旦您有了 setPixel 函数，剩下的就是实现您想要对像素执行的操作。

这是一个带有您的显示尺寸的版本，它会自动读取 Canvas 尺寸:

http://jsfiddle.net/jtbowden/9jQf4/

还有许多其他方法可以做到这一点，例如操纵单个像素或绘制非常短的线条。