问Javascript颜色选择器。如何在不造成浏览器崩溃的情况下显示所有255x255x255 RGB值？
EN

Stack Overflow用户

提问于 2020-12-28 02:28:33

回答 1查看 462关注 0票数 0

所以我说的不是HTML元素，我想做一个JS颜色选择器。

到目前为止，我创建了一个HTML，并添加了每个RGB值，这是可能的，因为，很好地打印所有的24位都是intensive.But，我很困惑如何在JS中创建一个RGBA颜色选择器？

我看到的所有例子都没有显示所有的RGB光谱，它们是如何工作的？该算法或方法是否显示RGB频谱选择器并在浏览器上显示光？

谢谢。

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-12-28 15:11:42

这里有些东西可以玩。有几件事要注意。

，我已经利用了浏览器理解hsl颜色系统的能力，以避免编写它和rgb之间的转换。
，这是单向的。什么东西您不能将rgb转换为hsl，所以mousemove上的conveniently.
redrawing不是您想要的。您可能希望处理每个画布上的点击，
我只是使用360x100，因为圆圈中有360x100，而100 x100是因为它避免计算百分比。回顾您需要0-360范围内的输入和0-100范围内的两个输入..

"use strict";
window.addEventListener('load', onLoaded, false);
function onLoaded(evt)
{
    let can = document.querySelector('canvas');
    let ctx = can.getContext('2d');
    for (let x=0; x<360; x++)
    {
        ctx.fillStyle = `hsl(${x}deg, 100%, 50%)`;
        ctx.fillRect(x,0,1,can.height);
    }
    can.addEventListener('mousemove', onMouseMove, false);
}

function onMouseMove(evt)
{
    let can = this;
    let xPos = evt.offsetX;
    let yPos = evt.offsetY;
    let ctx = this.getContext('2d');
    let imgData = ctx.getImageData(xPos,yPos,1,1);
    
    let r = imgData.data[0];
    let g = imgData.data[1];
    let b = imgData.data[2];
    
    let tgt = document.getElementById('hovCol');
    tgt.style.backgroundColor = `rgb(${r},${g},${b})`;
    
    drawSatLumCanvas(xPos);
}

function drawSatLumCanvas(hueDegrees)
{
    let can = document.querySelectorAll('canvas')[1];
    let ctx = can.getContext('2d');
    for (var y=0; y<100; y++)
    {
        for (var x=0; x<100; x++)
        {
            ctx.fillStyle = `hsl(${hueDegrees}deg, ${x}%, ${100-y}%)`;
            ctx.fillRect(x,y,1,1);
        }
    }
}

.swatch
{
    display: inline-block;
    height: 1em;
    width: 1em;
    border: solid 1px #888;
}

<body>
    <canvas width=360 height=100></canvas><br>
    Hovered: <span class='swatch' id='hovCol'></span><br>
    <canvas width=100 height=100 id='slCol'><canvas>
</body>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65472351

复制

相似问题

问Javascript颜色选择器。如何在不造成浏览器崩溃的情况下显示所有255x255x255 RGB值？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript颜色选择器。如何在不造成浏览器崩溃的情况下显示所有255x255x255 RGB值？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript颜色选择器。如何在不造成浏览器崩溃的情况下显示所有255x255x255 RGB值？
EN