非HTML5 JavaScript HSV颜色选择器如何工作？ [英] How do non-HTML5 JavaScript HSV color pickers work?

问题描述

有人可以解释JavaScript颜色选择器的工作原理吗？ （不使用HTML5画布的那些。）

Can someone explain how JavaScript color pickers work? (The ones that don't use HTML5 canvas.)

我的第一个想法是生成（数千个）1px divs程序化的盟友并给它们略微不同的背景颜色。但我认为必须有一个比这更好的解决方案！

My first idea was to generate (thousands of) 1px divs programmatic ally and give them a slightly different background color. But I think there has to be a better solution than this!

推荐答案

对于标准选择器，你需要一个带有静态图像的静态图像从左（不透明）到右（透明）的alpha渐变，以及从顶部（白色）到底部（黑色）的颜色渐变。创建一个DIV，并在其中创建图像。

For a standard picker, you need a static image with an alpha gradient from left (opaque) to right (transparent), and a color gradient from top (white) to bottom (black). Create a DIV, and the image in it.

Hue选择器是一个静态图像。选择色调时，DIV的背景颜色会更改为此色调。 DIV顶部的透明图像将改变这种底层颜色，并模拟一个合适的颜色选择器。魔术不是吗？

The Hue picker is a static image. When a hue is selected, the background color of the DIV changes to this hue. The transparent image on top of the DIV will alter this underlying color, and simulate a proper color picker. Magic isn't it ?

编辑：这是一个HSV选择器，色调选​​择器选择了Hue。大选择器上的X坐标是饱和度，Y是亮度（或值）。那么您可能需要HSV到RGB算法。

This is an HSV picker, the hue picker selects, well, the Hue. The X coordinate on the big picker is the Saturation, and the Y is the Brightness (or value). You will then probably need an HSV to RGB algorithm.

这篇关于非HTML5 JavaScript HSV颜色选择器如何工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！