非HTML5 JavaScript RGB颜色选择器如何工作？

Question

我已经问过 HSV颜色选择器如何工作，现在我想知道带有JavaScript的RGB颜色选择器如何工作。 那些不使用HTML5 Canvas API的应用。 有人可以向我解释它们背后的概念吗？

这是我的意思的示例： http : //www.eyecon.ro/colorpicker/

注意：我不是在寻找可立即使用的jQuery颜色选择器。 我想开发自己的一个用于学习目的！ jQuery的解决方案很好！

Answer 1

假设您要选择介于0和255之间的RGB值，类似于您链接到的示例，这是我的处理方法：

• 生成1个静态图像（1x256像素），其中包含右侧滑块中所示的“彩虹渐变”
• 生成1个256x256像素的静态叠加图像RGBA图像，如下所示
  • 左上方：R = 1 G = 1 B = 1 A = 1
  • 右上方：R = 0 G = 0 B = 0 A = 0
  • 左下角：R = 0 G = 0 B = 0 A = 1
  • 右下角：R = 0 G = 0 B = 0 A = 1
• 将第一张图像用作滑块的背景。 它应生成要显示在颜色选择器左上角的颜色。 使用鼠标坐标查找颜色的实际Y值
• 创建一个“背景” div（256x256 px），其颜色由滑块选择。 使用第二个静态图像作为其顶部的div叠加层。 使用alpha值，它应该为您提供一个白色和2个黑色角和一个所需颜色的角。
• 在那个正方形上使用鼠标坐标。 颜色将必须计算。

我要创建公式和图像给您。 :)