如何解决如何计算调色板中所选颜色的颜色?
这是对this question I asked earlier
的跟进以前,我在调色板中的选定像素上使用 getImageData
来确定颜色是什么。然而,梯度并不总是完全准确。甚至 Google's color picker 的情况也是如此。它们的调色板并不完全准确,但它们根据您在调色板中选择的位置返回的颜色是。
因此,假设此代码正在生成调色板:
function drawPalette(hue) {
var ctx = document.querySelector("canvas").getContext("2d");
let w = ctx.canvas.width;
let h = ctx.canvas.height;
var grH = ctx.createLinearGradient(0,w,0);
grH.addColorStop(0,'#fff');
grH.addColorStop(1,'hsl(' + hue + ',100%,50%)');
ctx.fillStyle = grH;
ctx.fillRect(0,h);
var grV = ctx.createLinearGradient(0,h);
grV.addColorStop(0,'rgba(0,0)');
grV.addColorStop(1,'#000');
ctx.fillStyle = grV;
ctx.fillRect(0,h);
}
drawPalette(120);
<canvas></canvas>
那么我如何确定画布中任何给定坐标处存在哪种颜色? getImageData
将不起作用,因为它会稍微不准确。相反,我相信我需要一个函数,在给定色调、x 位置、y 位置、宽度和高度的情况下,将返回调色板中该位置的颜色。可以这样做吗?
解决方法
您知道鼠标(或指针)的位置(pointerdown、pointermove),因此您应该能够计算相对于您在上一个问题 (CSS Linear gradient is inaccurate?) 中构建的画布的位置作为百分比(如果指针位于 300 像素宽画布的中间,则为 50%,垂直位置相同)。左下角为 0%、0%,右上角为 100%、100%。
百分比与色调相结合将为您提供 HSV 值,其中:
H = hue
S = saturation = left to right percentage
V = value = bottom to top percentage
然后您可以使用以下方法将 HSV 值转换为 HSL 值:
function hsv2hsl(h,s,v) {
var l = v - (v * s) / 2;
var m = Math.min(l,1 - l);
return [h,m ? (v - l) / m : 0,l];
}
如果鼠标位于画布右侧,则该值为 100%。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。