时间戳

首页 > 解决方案 > 如何创建像 Phillips Hue 这样的颜色选择器圆圈

javascript - 如何创建像 Phillips Hue 这样的颜色选择器圆圈

问题描述

我正在尝试在 javascript 画布中创建一个颜色选择器。我想做这样的事情：

选色器

我希望当我单击圆圈中的任意位置时，我得到 x、y 坐标（所以我可以使用其他一些元素来标记选定的颜色）和颜色。如果解决方案不是带有嵌入图像的画布，而是类似linear-gradient.

我已经搜索了互联网，但没有找到任何关于我的问题的信息。

PS：也许cssborder-radius会帮助做一个圆圈。

标签： javascriptcsshtml5-canvas

解决方案

如果您真的不想使用图像，则需要当前手动绘制每个像素。我确信某处有数学函数。

您不能使用渐变来执行此操作的原因是，要获得这样的渐变色轮，您需要堆叠径向渐变和圆锥渐变。圆锥渐变将创建色轮，径向渐变将提供从中心展开的白色叠加层。

您目前无法使用画布执行此操作，因为目前并非所有浏览器都支持. 在那些浏览器中，您只能使用径向渐变（当然还有线性渐变，但这些对此无济于事）。createConicGradientcanvas

您可以使用堆叠的 CSS 背景渐变，但浏览器目前没有可靠的方法来确定特定 X/Y 坐标处单个像素的背景颜色，除了在画布内。并且由于 CSS 背景样式不是画布上下文的一部分，因此它不起作用。有一些使用 html2canvas 库的解决方法，但这在不支持画布上的圆锥渐变的浏览器中存在相同的问题。

浏览器开始 实现EyeDropper API，但这仍然很少见，即使浏览器有它，它也是一个不稳定的 API，并不真正适合生产使用。但是，如果它受支持，您可以将其与堆叠的 CSS 背景渐变一起使用，div就像这样，不需要画布：

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('color-wheel').addEventListener('click', function() {
    (new EyeDropper()).open().then(function(result) {
      document.getElementById('color').innerText = result.sRGBHex;
    });
  });
});
#color-wheel {
  width: 150px;
  height: 150px;
  background: radial-gradient(white, transparent 80%),
              conic-gradient(#e43f00, #fae410, #55cc3b, #09adff, #6b0efd, #e70d86, #e43f00);
  border-radius: 50%;
}
<div id="color-wheel"></div>
Color: <span id="color"></span>

但正如我所说，这是不稳定的，在可预见的将来肯定不会在所有浏览器中工作。

推荐阅读