我正在制作浏览器内的单色 LED 显示屏。我应该使用 <canvas> 还是 <div>s 来显示 LED？

Question

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

我看到了两种方法：

1. 使用<canvas> 并用它绘制“LED”。
2. 为每个“LED”使用<div>。我觉得我可以更好地控制每个“LED”，但想到将近 10000 个divs 我有点害怕。

我想知道哪种方法更可取以及为什么。或者还有其他方法吗？

Answer 1

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

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

这是一个快速的canvas 演示，它在画布上随机绘制 3x3“像素”：

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

这真的没有那么多代码，也不是太难。一旦你有了setPixel 函数，剩下的就是实现你想要对像素做的事情。

这是一个与您的显示尺寸相符的版本，它会自动读取画布尺寸：

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

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