Javascript 转换<；帆布>；线性渐变到CSS线性渐变

我有一个web工具，它使用HTML画布创建线性渐变。我想将这些渐变转换为有效的CSS渐变。我尝试了我所知道的所有数学知识（其实并不多）。。。没有真正的结果

我现在知道的事情： -CSS线性gradeint可以从负值开始，而画布渐变不能

以下是我目前的工作：

var宽度=50；
var高度=50；
变量handlesPositions=[
{
“x”：0.16，
“y”：-1.98
},
{
“x”：0.84，
“y”：2.98
},
]
var colorStops=[
{
“颜色”：“FF0000”，
“位置”：0.359
},
{
“颜色”：“0094FF”，
“位置”：0.495
},
{
“颜色”：“FFFF00”，
“位置”：0.652
}
];
//帆布
var c=document.getElementById（“源”）；
var ctx=c.getContext（“2d”）；
var x0=把手位置[0].x*宽度；
变量y0=把手位置[0]。y*高度；
var x1=把手位置[1]。x*宽度；
变量y1=把手位置[1]。y*高度；
var grd=ctx.createLinearGradient（x0，y0，x1，y1）；
grd.addColorStop（colorStops[0]。位置，colorStops[0]。颜色）；
grd.addColorStop（colorStops[1]。位置，colorStops[1]。颜色）；
grd.addColorStop（colorStops[2]。位置，colorStops[2]。颜色）；
ctx.fillStyle=grd；
ctx.fillRect（0,0,50,50）；
//画布到CSS
函数canvasToLinearGradient（手柄、挡块）{
const handle0=句柄[0]；
const handle1=句柄[1]；
常数ydiff=handle1.y-handle0.y；
const xdiff=handle0.x-handle1.x；
常数角=数学常数2（-xdiff，-ydiff）；
const cssstop=stops.map（（stop）=>{
返回`${stop.color}${Math.round（stop.position*100）}%`；
})。加入（‘，’）；
返回`线性梯度（${angle}rad，${cssstop}）`；
}
document.getElementById（“当前”）.style.backgroundImage=CanVastOlinerGradient（无手柄位置、色块）
#目标{
背景：线性梯度（172.19度，FF0000-12.39%，0094FF 48.06%，FF00 117.89%）；
}
.行{
显示：柔性；柔性方向：行；对齐内容：间距；对齐项目：居中；页边距底部：10px
}

目标
来源
当前结果
正如我在a中所解释的，您可以尝试依靠
背景大小
/
背景位置
来创建渐变

首先，这里是如何转换第一个渐变，使颜色介于
0%
和
100%
之间，并在以后使用Canvas轻松处理


#目标{
背景：线性梯度（172.19度，FF0000-12.39%，0094FF 48.06%，FF00 117.89%）；
}
#目标-1{
/*我们加上12.39%，使第一个为0%*/
背景：线性梯度（172.19度，#FF0000 0%，#0094FF 60.45%，#FFFF00 130.29%）；
}
#目标2{
/*我们除以1.3029，得到最后一个100%*/
背景：线性梯度（172.19度，#FF0000 0%，#0094FF 46.39%，#FFFF00 100%）；
}
#目标-3{
/*我们将大小增加1.3029，以纠正以前的分区*/
背景：线性梯度（172.19度，#FF0000 0%，#0094FF 46.39%，#FFFF00 100%）；
背景大小：130.29%130.29%；
}
#目标4{
/*我们移动梯度以校正-12.39%*/
背景：线性梯度（172.19度，#FF0000 0%，#0094FF 46.39%，#FFFF00 100%）；
背景大小：130.29%130.29%；
背景位置：计算器（-0.1239*50px）/1.3029）计算器（-0.1239*50px）/1.3029）
}
#目标5{
/*我们也可以写*/
背景：线性梯度（172.19度，#FF0000 0%，#0094FF 46.39%，#FFFF00 100%）钙（（-0.1239*50px）/1.3029）钙（（-0.1239*50px）/1.3029）/130.29%130.29%；）
.行{
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
对齐项目：居中；
边际下限：10px
}

目标
过渡1
过渡2
过渡3
过渡决赛
过渡决赛
正如我在a中所解释的，您可以尝试依靠
背景大小
/
背景位置
来创建渐变

首先，这里是如何转换第一个渐变，使颜色介于
0%
和
100%
之间，并在以后使用Canvas轻松处理


#目标{
背景：线性梯度（172.19度，FF0000-12.39%，0094FF 48.06%，FF00 117.89%）；
}
#目标-1{
/*我们加上12.39%，使第一个为0%*/
背景：线性梯度（172.19度，#FF0000 0%，#0094FF 60.45%，#FFFF00 130.29%）；
}
#目标2{
/*我们除以1.3029，得到最后一个100%*/
背景：线性梯度（172.19度，#FF0000 0%，#0094FF 46.39%，#FFFF00 100%）；
}
#目标-3{
/*我们将大小增加1.3029，以纠正以前的分区*/
背景：线性梯度（172.19度，#FF0000 0%，#0094FF 46.39%，#FFFF00 100%）；
背景大小：130.29%130.29%；
}
#目标4{
/*我们移动梯度以校正-12.39%*/
背景：线性梯度（172.19度，#FF0000 0%，#0094FF 46.39%，#FFFF00 100%）；
背景大小：130.29%130.29%；
背景位置：计算器（-0.1239*50px）/1.3029）计算器（-0.1239*50px）/1.3029）
}
#目标5{
/*我们也可以写*/
背景：线性梯度（172.19度，#FF0000 0%，#0094FF 46.39%，#FFFF00 100%）钙（（-0.1239*50px）/1.3029）钙（（-0.1239*50px）/1.3029）/130.29%130.29%；）
.行{
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
对齐项目：居中；
边际下限：10px
}

目标
过渡1
过渡2
过渡3
过渡决赛
过渡决赛
这可能会帮助您：。。你会在那里找到一些数学知识。检查第二部分，不必使用背景-size@TemaniAfif无法使其工作：（好的，我会简短地补充一个答案，这可能会对你有所帮助：……你会在那里找到一些数学知识。检查第二部分，你不必使用背景知识-size@TemaniAfif无法使其工作。：（ok将很快添加答案