Javascript 在值之间混合颜色

我试图创建一个像时间倒计时使用画布弧，绘图是好的，但弧将有一个笔划颜色，我想排序混合

我画圆弧的方法是使用0到100之间的数字，100基本上是完整的圆弧，0是零。当该值大于66且小于（或等于）100时，它将是绿色和橙色的混合，100表示总绿色，66表示总橙色。65及以下为橙色和红色的混合物，其中总红色为0

我不知道从哪里开始，也不知道该寻找什么，也不知道该研究如何获得价值

谁能给我指一下正确的方向吗

这是到目前为止我的代码（x）

编辑：这是我一直在寻找的结果。它现在正像我希望的那样工作。干杯

---

注意：这个答案是对原始答案的一次后期大编辑。在第一次尝试后，我错误地理解了OP的意图，OP添加了一个带有示例的链接，因为那时我打算提供一个解决方案，因为我对当前的答案不满意，而且练习很有趣

---

答案分为两个主要部分：

混合颜色（已经有解决此问题的答案，使用库或创建方法来插值/混合颜色十六进制值）

绘制一条弧并使用混合颜色

/*
*混合颜色
*（借用并修改自@mark meyer answer）
*/
//将十六进制整数分解为多个组件：
const getComponents=（color）=>Array.from（{length:3}，（u，i）=>Math.floor（color/16**（2*i）%16**2））
//按组件插入阵列
常量插值=（arr1，arr2，percent）=>arr1.map（（v，index）=>Math.floor（v+（arr2[index]-v）*（percent/100）））
const colorBlend=值=>{
常量StartColor=0x11FF11；//绿色
常量MiddleColor=0xFFA726；//橙色
const EndColor=0xEF5350；//红色
让[开始，结束，v]=值<50
？[StartColor、MiddleColor、value*2]
：[MiddleColor，EndColor，（值-50）*2]
让插入=插值（getComponents（开始）、getComponents（结束）、v）
常数颜色=插入式
.reduce（（n，分量，索引）=>n+分量*（16**（索引*2）），0）
.toString（16）.padStart（6，'0'）
返回`${color}`
}
/*
*划弧
*/
const canvas=document.getElementById（'canvas1'）
const ctx=canvas.getContext（'2d'）
常数大小=30
设p=0
const grad=ctx.createLinearGradient（大小，大小，大小*2，大小*2）
渐变添加颜色停止（0，#66BB6A）
渐变加色停止（0.5，#FFA726”）
渐变添加颜色停止（1，#EF5350”）
ctx.lineWidth=6
常量绘图=（）=>{
p+=0.01
clearRect（0，0，canvas.width，canvas.height）
ctx.strokeStyle=颜色混合（p*50）
ctx.beginPath（）
ctx.arc（尺寸*1.5，尺寸*1.5，尺寸，1.5*Math.PI，（1.5+p）*Math.PI）
ctx.stroke（）
if（p<2）{
window.requestAnimationFrame（绘制）；
}
}
window.requestAnimationFrame（绘制）
我假设你想


基于三种已知颜色创建色阶-
'66BB6A'、'FFA726'、'EF5350'
从一个域中输入一个数字（
0-100
），并从刻度中计算出一个新颜色

是一个很好的小js库，可以进行颜色缩放和转换


const colorScale=chroma.scale（['66BB6A'，'FFA726'，'EF5350']）.domain（[0100]）；
log（colorScale（20.toString（））
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.fillStyle=色标（20）；
ctx.beginPath（）；
ctx.arc（100,75,50,0,2*Math.PI）；
ctx.fill（）

这是我做的一个

当然，使用专用于此的库会更容易。但是，如果有人对数学感兴趣，可以将十六进制整数分解为各个分量，然后分别插值每个分量，以获得特定位置的颜色：


//将十六进制整数分解为组件：
const getcomonts=（color）=>Array.from（{length:3}，（u，i）=>Math.floor（color/16**（2*i）%16**2））
//按组件插入阵列
常量插值=（arr1，arr2，percent）=>arr1.map（（v，index）=>Math.floor（v+（arr2[index]-v）*（percent/100）））
功能颜色（值）{
常量StartColor=0x11FF11；//绿色
常量MiddleColor=0xFFA726；//橙色
const EndColor=0xEF5350；//红色
让[开始，结束，v]=值<50
？[StartColor、MiddleColor、value*2]
：[MiddleColor，EndColor，（值-50）*2]
让插入=插值（getComonents（开始），getComonents（结束），v）
返回插入式.reduce（（n，分量，索引）=>n+分量*（16**（索引*2）），0）
}
const canvas=document.getElementById（'the_canvas'）
const ctx=canvas.getContext（'2d'）
例如（设i=0；i您可以使用带有0-100符号的RGB颜色。例如RGB（0，100，0）给出绿色。@PeterBode我知道我能做到，虽然现在的问题是我有3种不同的颜色，分别为红色、绿色和蓝色，但它现在如何为每个百分比提供正确的值？@PeterBode这正是我开始测试圆弧的方式，尽管这里的问题是我需要在代码段中的颜色之间进行良好的混合，不是吗t从黑色到绿色。现在是一种颜色到另一种颜色，然后是另一种颜色，基于百分比。而所有颜色都有红色、绿色和蓝色值。可能重复@Tedinoz我不知道我的问题是如何重复的，因为我需要在颜色之间找到正确的混合，而不是在值低于或高于时切换颜色。你能解释一下吗我的问题与你链接的问题是如何相同的？谢谢：）我甚至不知道那是一件事！谢谢尽管整个电弧可以使用相同的当前颜色吗？干杯@RichardSandberg能否请您详细说明一下“尽管整个弧可能使用相同的当前颜色？”。我不明白你的意思…所以我有一个值（百分比100
static color (value)
{
    const StartColor  = 0x66BB6A; // Green
    const MiddleColor = 0xFFA726; // Orange
    const EndColor    = 0xEF5350; // Red  
}

var c = document.getElementById("foo");
var i = 0;
var timer = setInterval(function() {

    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, (i / 100) * Math.PI);
    ctx.strokeStyle = 'RGB('+((100-i)*2)+', '+i+', 0)';
    ctx.stroke();

    if((i / 100) == 2) {
        clearInterval(timer);
        console.log('FULL');
    }
    i++;
}, 100);