颜色的选择框是怎么做到2维的平面表示的颜色的三个值

Question

左上角是255，255，255， 右下角是0，0，0
这个是怎么计算的
还有下面的第一个拖动条拖动影响的是啥参数。
对颜色一知半解，求指导，因为想弄一个颜色选择卡的轮子（想自己实现）
求帮助！谢谢！

Answer 1

    let color = document.createElement('canvas') as HTMLCanvasElement;
    color.height = 100;
    color.width = 100;
    color.setAttribute('style', `
        border: 1px solid black; 
        width: 200px; 
        height: 200px; 
        display: block; 
        position: absolute;
        z-index: 10000;
        background-color: #ffffff;
        top: calc(50% - 100px);
        left: calc(50% - 100px);
    `);
    document.querySelector('body').appendChild(color);
    let ctx: CanvasRenderingContext2D = color.getContext('2d');
    let imageData = ctx.getImageData(0, 0, color.width, color.width);
    let referenceRgb = {r: 10, g: 255, b: 14}
    for(let i = 0; i < color.height; i++) {
        let per = i /  color.height;
        let t =  Math.floor(per * 255);
        let t1 = {r: 255 - t, g: 255 - t, b: 255 - t};
        let t2 = {
            r: Math.floor(referenceRgb.r - per * referenceRgb.r),
            g: Math.floor(referenceRgb.g - per * referenceRgb.g),
            b: Math.floor(referenceRgb.b - per * referenceRgb.b),
        }
        for(let j = 0; j < color.width; j++) {
            let p2 = j / color.width;
            let r = t1.r - (t1.r - t2.r) * p2;
            let g = t1.g - (t1.g - t2.g) * p2;
            let b = t1.b - (t1.b - t2.b) * p2;
            let index = (j + i * color.width) * 4;
            imageData.data[index + 0] = r;
            imageData.data[index + 1] = g;
            imageData.data[index + 2] = b;
            imageData.data[index + 3] = 255;
        }
    }
    ctx.putImageData(imageData, 0, 0);

已知滚动条得到左上角色值(r,g,b)
在左边从上到下去(255,255,255)->(0,0,0)乘以向下的比例（255~0）及得到（r1,g1,b1）；
在右边边从上到下去(r,g,b)->(0,0,0)乘以向下的比例及得到（r2,g2,b2）；
从左到右（r1,g1,b1）->（r2,g2,b2）比例就得到需要描绘的点的rgb值