Javascript 以编程方式更改值

我正在使用，我想以编程方式更改色轮的颜色。因此，如果我有一个颜色值（rgb、hsv等），我想将色轮更改为该特定颜色

例如，如果我有

rgb（255，255，80）

，我如何更改色轮来显示它

相关代码： 自定义代码：

function changeColor() {
    var redColor = 255;
    var greenColor = 255;
    var blueColor = 80;

    //currentX =
    //currentY =
    redraw(0);

    // The following line is redundent if I'm calling 'redraw`, but it's there just to show what I mean.
    label.textContent = b.style.background = 'rgb(' + redColor + ', ' + greenColor + ', ' + blueColor + ')';
}

实际代码来自redraw（）函数

function redraw(e) {

    // Only process an actual change if it is triggered by the mousemove or mousedown event.
    // Otherwise e.pageX will be undefined, which will cause the result to be NaN, so it will fallback to the current value
    currentX = e.pageX - c.offsetLeft - radiusPlusOffset || currentX;
    currentY = e.pageY - c.offsetTop - radiusPlusOffset || currentY;

    // Scope these locally so the compiler will minify the names.  Will manually remove the 'var' keyword in the minified version.
    var theta = atan2(currentY, currentX),
        d = currentX * currentX + currentY * currentY;

    // If the x/y is not in the circle, find angle between center and mouse point:
    //   Draw a line at that angle from center with the distance of radius
    //   Use that point on the circumference as the draggable location
    if (d > radiusSquared) {
        currentX = radius * math.cos(theta);
        currentY = radius * math.sin(theta);
        theta = atan2(currentY, currentX);
        d = currentX * currentX + currentY * currentY;
    }

    label.textContent = b.style.background = hsvToRgb(
        (theta + PI) / PI2, // Current hue (how many degrees along the circle)
        sqrt(d) / radius, // Current saturation (how close to the middle)
        input.value / oneHundred // Current value (input type="range" slider value)
    )[3];

    // Reset to color wheel and draw a spot on the current location. 
    a.putImageData(imageData, 0, 0);

    // Draw the current spot.
    a.stroke();
    a.font = "1em arial";
    a.fillText("♥", currentX+radiusPlusOffset-4,currentY+radiusPlusOffset+4);

}

（函数（）{
document.getElementById（'button'）。onclick=changeColor；
函数changeColor（）{
var redColor=255；
绿色变量=255；
蓝色变种=80；
//电流X=
//当前的=
重绘（0）；
//如果我调用'redraw'，下面的行是redundent，但它只是为了显示我的意思。
label.textContent=b.style.background='rgb（'+redColor+'、'+greenColor+'、'+blueColor+'）；
}
//声明常量和变量以帮助缩小
//其中一些是内联的（在带有实际等式的一侧有注释）
var doc=单据；
doc.c=doc.createElement；
b、 a=b.1；
变量宽度=c.宽度=c.高度=400，
标签=b.a（文件c（“p”）），
输入=b.a（文件c（“输入”）），
imageData=a.createImageData（宽度，宽度），
像素=imageData.data，
一百=input.value=input.max=100，
圆偏移=10，
直径=380，//宽度圆偏移*2，
半径=190，//直径/2，
radiusPlusOffset=200，//半径+圆偏移
半径平方=半径*半径，
two55=255，
当前Y=100，
currentX=-currentY，
wheelPixel=16040；//circleOffset*4*宽度+circleOffset*4；
//数学助手
var math=数学，
PI=math.PI，
PI2=PI*2，
sqrt=math.sqrt，
atan2=数学。atan2；
//设置DOM属性
b、 style.textAlign=“中心”；
label.style.font=“2em快递”；
input.type=“范围”；
//将色轮数据加载到内存中。
对于（y=input.min=0；yradiusSquared？0:two55；
}
}
//绑定事件处理程序
input.onchange=重新绘制；
c、 onmousedown=doc.onmouseup=function（e）{
//如果这是mouseup事件，则取消绑定mousemove；如果这是mousedown事件，则绑定mousemove
doc.onmousemove=/p/.test（e.type）？0：（重新绘制（e），重新绘制）；
}
//处理手动调用+mousemove事件处理程序+输入更改事件处理程序都在一个位置。
函数重画（e）{
//仅当由mousemove或mousedown事件触发时，才处理实际更改。
//否则e.pageX将未定义，这将导致结果为NaN，因此它将返回到当前值
currentX=e.pageX-c.offsetLeft-radiusPlusOffset | | currentX；
currentY=e.pageY-c.offsetTop-radiusPlusOffset | | currentY；
//本地作用域，以便编译器缩小名称。将手动删除缩小版本中的“var”关键字。
varθ=atan2（电流y，电流x），
d=电流X*电流X+电流Y*电流Y；
//如果x/y不在圆中，请查找圆心和鼠标点之间的角度：
//从中心以半径的距离以该角度画一条线
//使用圆周上的该点作为可拖动位置
如果（d>半径平方）{
currentX=半径*数学cos（θ）；
电流y=半径*数学sin（θ）；
θ=atan2（电流y，电流x）；
d=电流X*电流X+电流Y*电流Y；
}
label.textContent=b.style.background=hsvToRgb(
（θ+π）/PI2，//当前色调（沿圆的度数）
sqrt（d）/半径，//电流饱和（离中间有多近）
input.value/one一百//当前值（input type=“range”滑块值）
)[3];
//重置为色轮并在当前位置上绘制点。
a、 putImageData（imageData，0,0）；
//绘制当前点。
//我试过长方形、圆形和心形。
/*
//矩形：
a、 fillStyle='#000'；
a、 fillRect（currentX+radiusPlusOffset，currentY+radiusPlusOffset，6,6）；
*/
/*
//圆圈：
a、 beginPath（）；
a、 strokeStyle='000'；
a、 弧（~~currentX+radiusPlusOffset，~~currentY+radiusPlusOffset，4,0，PI2）；
a、 笔划（）；
*/
//心脏：
a、 font=“1em arial”；
a、 填充文本（“♥", 电流X+radiusPlusOffset-4，电流Y+radiusPlusOffset+4）；
}
//在TinyColor中创建了HSV到RGB转换函数的较短版本
// https://github.com/bgrins/TinyColor/blob/master/tinycolor.js
功能hsvToRgb（h、s、v）{
h*=6；
var i=~~h，
f=h-i，
p=v*（1-s），
q=v*（1-f*s），
t=v*（1-（1-f）*s），
mod=i%6，
r=[v，q，p，p，t，v][mod]*two55，
g=[t，v，v，q，p，p][mod]*two55，
b=[p，p，t，v，v，q][mod]*two55；
返回[r，g，b，“rgb（“+~~r+”，“+~~g+”，“+~~b+”）；
}
//启动一切
重绘（0）；
/*
//只是一个想法，我不得不用一些变化的颜色来启动一切…
//可能无法将其压缩为1k，但可能比这个小得多：
电流X=电流Y=1；
var interval=setInterval（函数（）{
电流x-；
电流y*=1.05；
重画（0）
}, 7);
setTimeout（函数（）{
清除间隔（间隔）
}, 700)
*/
})（）；

单击我以更改颜色


var b=document.body；
var c=document.getElementsByTagName（'canvas'）[0]；
var a=c.getContext（'2d'）；
document.body.clientW
var mx = cx - s * radius * Math.cos(2 * Math.PI * h);
var my = cy - s * radius * Math.sin(2 * Math.PI * h);

// Created a modified version of the HSV to RGB conversion function in TinyColor
// https://github.com/bgrins/TinyColor/blob/master/tinycolor.js
function rgbToHsv(r, g, b) {

  r = r / two55;
  g = g / two55;
  b = b / two55;

  var max = math.max(r, g, b), min = math.min(r, g, b);
  var h, s, v = max;

  var d = max - min;
  s = max === 0 ? 0 : d / max;

  if(max == min) {
    h = 0; // achromatic
  }
  else {
    switch(max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    h /= 6;
  }
  return { h: h, s: s, v: v };
}

// This function converts the RGB to HSV and uses the HSV to set the 
// currentX, currentY, and input.value (saturation) values.
function update(r,g,b){
  var hsv = rgbToHsv(r,g,b);

  var newD = math.round(math.pow(radius * hsv.s, 2));
  var newTheta = (hsv.h * PI2) - PI;

  currentX = math.round(math.sqrt(newD) * math.cos(newTheta));
  currentY = math.round(math.sqrt(newD) * math.sin(newTheta));

  input.value = hsv.v * 100;

  redraw(0);
}

update(158,255,151);