非html5 JavaScript RGB颜色选择器是如何工作的

How do non-HTML5 JavaScript RGB color pickers work?

本文关键字：何工作 工作 JavaScript html5 RGB 颜色 选择器      更新时间：2023-09-26

我已经问过HSV颜色选择器是如何工作的，现在我想知道RGB颜色选择器是如何使用JavaScript工作的。那些不使用HTML5 Canvas API的。有人能给我解释一下它们背后的概念吗?

下面是我的意思的一个例子:http://www.eyecon.ro/colorpicker/

注意:我不是在寻找准备使用jQuery颜色选择器。我想开发一个我自己的学习目的!jQuery的解决方案是很好的!

假设你想在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值创建一个"background"div (256x256像素)，用滑块选择颜色。使用第二个静态图像作为覆盖div在它的顶部。有了alpha值，它应该会给你一个白色和两个黑色的角，一个角的颜色是你需要的。
  • 使用该方格中的鼠标坐标。颜色需要计算一下。

我把创建公式和图像留给你。:)

相关文章：