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

Question

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

我认为有两种方法可以做到这一点：

1. 使用<canvas>并用它绘制'LED'。
2. 为每个'LED'使用<div>。我觉得我对每个'LED'有更多的控制权，但是对近万个div的想法让我感到有些害怕。

我想知道哪种方法更可取，为什么。或者还有另一种方式吗？

Answer 1

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

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

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

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

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

这是一个具有显示尺寸的版本，它会自动读取画布大小：

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

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