用随机颜色着色div的所有像素。 Javascript允许

Question

使用随机颜色为div的内部区域着色的最佳方法是什么？

我们说我们有 <div style="width:200px; height:200px;">colorize the whole rectangle</div>

我之前问过Color a pixel in the div的问题只是一个像素。所有像素呢？

据我所知，只有css没有解决方案。所以，javascript是一个完美的解决方案。请不要jQuery，除非它不影响性能。表现很重要。

因此，background-color:red;不是解决方案，因为它仅使用一种颜色进行绘制。我希望能够为div中的任何（m，n）像素选择一种颜色。

谢谢。

Answer 1

我在这里为这种要求做了一个演示：http://jsfiddle.net/7FMD2/3/。

可以按以下步骤细分解决方案：

1. 允许为目标元素中的特定区域传递显式颜色
2. 为缺少特定颜色设置的所有区域生成随机颜色
3. 使用明确定义的样式生成DocumentFragment所需的所有元素，包括position: absolute
4. 将目标元素的位置设置为position：relative并附加DocumentFragment

<强>用法

var element = document.getElementById('rainbow');
new Rainbow(element, options).initialize();

选项

为此，我在Rainbow

上添加了以下选项
• 强制：采用以像素坐标为键的嵌套对象，强制颜色为值：forced: { 1: { 0: '#000000', 20: '#fffff' } }将强制像素x：1，y：0为黑色，像素x为： 1，y：20为白色
• pixelSize ：定义目标div中一个像素的大小。小提琴使用了10的pixelSize设置，这使得每个颜色块的高度为10px，宽度为10px。

注意

对于大型目标元素，这可能会非常昂贵，因为每个颜色块都有自己的元素。特别是在旧版浏览器中，这可能会很难达到性能。你可能最好通过画布生成一个像AndreasMøller建议的图像，或者用一些简单的服务器端脚本为你提供图像background-image。

Answer 2

没有好的解决方案只使用html，因为标记会很重。

我建议使用画布。看看这篇文章的表现：Drawing a dot on HTML5 canvas