Javascript 画一个角/弧，在画布上用辐射线填充？

问题：我正在画布上画一艘宇宙飞船。在x/y上方悬停时，我在画布上画了一条弧，表示星际飞船武器的角度和射程（考虑到星际飞船当前的暴露/朝向）。目前，确定的角度以绿色绘制，并尽可能延伸到武器射程值允许的范围

但是，我想使用渐变填充确定的弧，以指示精度下降（即渐变从绿色开始，移动到橙色，距离星际飞船位置越远，角度越远，变为红色）

但是，我不知道如何用渐变替换绘制的圆弧上的库存ctx.fill（）

var ship {
  loc: {x, y}, // lets say 100, 100
  facing: facing // lets say facing 0, i.e. straight right
  weapons: objects (range, startArc, endArc) // lets say 50, 300, 60 -> 120 degree angle, so -60 and +60 from facing (0/360)
}
        for (var i = 0; i < weapon.arc.length; i++){
            var p1 = getPointInDirection(weapon.range, weapon.arc[i][0] + angle, pos.x, pos.y);
            var p2 = getPointInDirection(weapon.range, weapon.arc[i][1] + angle, pos.x, pos.y)
            var dist = getDistance( {x: pos.x, y: pos.y}, p1);
            var rad1 = degreeToRadian(weapon.arc[i][0] + angle);
            var rad2 = degreeToRadian(weapon.arc[i][1] + angle);        

            fxCtx.beginPath();          
            fxCtx.moveTo(pos.x, pos.y);
            fxCtx.lineTo(p1.x, p1.y);   
            fxCtx.arc(pos.x, pos.y, dist, rad1, rad2, false);
            fxCtx.closePath();
            fxCtx.globalAlpha = 0.3;
            fxCtx.fillStyle = "green";
            fxCtx.fill();
            fxCtx.globalAlpha = 1;
}

var船舶{
loc:{x，y}，//比如说100，100
朝向：朝向//假设朝向0，即向右直
武器：物体（射程，星塔，端弧）//比如说50，300，60->120度角，所以从正面（0/360）到-60和+60
}
对于（变量i=0；i

是否有可能替换圆弧/globalalpha/填充，因此使用渐变流而不是固定颜色，如果有，如何替换

---

感谢您用渐变填充圆弧，动画只是为了好玩

使用径向渐变并将颜色停止设置为距离的分数

函数createRadialGradient采用6个数字表示渐变的位置x、y和开始半径以及位置x、y和结束半径

颜色停止是通过渐变对象addColorStop函数添加的，该函数将渐变的内部值0到外部值1，颜色作为CSS颜色字符串。“F00”或“rgba（200,0,0,0.5）”或“红色”

然后使用渐变作为填充样式

var canvas=document.createElement（“canvas”）；
document.body.appendChild（画布）；
var ctx=canvas.getContext（“2d”）；
功能更新（时间）{
ctx.fillStyle=“黑色”；
ctx.fillRect（0，0，canvas.width，canvas.height）；
//分区在分数中的位置
var posRed=0.8+数学sin（时间/100）*0.091；
var posOrange=0.5+数学sin（时间/200）*0.2；
var posGreen=0.1+数学sin（时间/300）*0.1；
var pos={
x:canvas.width/2，
y:canvas.height/2
};
var-dist=100；
var ang1=2+数学sin（时间/1000）*0.5；
var ang2=4+数学sin（时间/1300）*0.5；
var grad=ctx.createRadialGradient（位置x，位置y，0，位置x，位置y，距离）；
渐变添加颜色停止（0，#0A0）；
渐变添加颜色停止（posGreen，#0A0）；
渐变添加颜色停止（posOrange，#F80”）；
渐变添加颜色停止（posRed，#F00”）；
渐变添加颜色停止（1，#000）；
ctx.fillStyle=梯度；
ctx.beginPath（）；
ctx.移动到（位置x、位置y）；
ctx.弧（位置x、位置y、距离ang1、ang2）；
ctx.fill（）；
requestAnimationFrame（更新）；
}
requestAnimationFrame（更新）用渐变填充圆弧，动画只是为了好玩

使用径向渐变并将颜色停止设置为距离的分数

函数createRadialGradient采用6个数字表示渐变的位置x、y和开始半径以及位置x、y和结束半径

颜色停止是通过渐变对象addColorStop函数添加的，该函数将渐变的内部值0到外部值1，颜色作为CSS颜色字符串。“F00”或“rgba（200,0,0,0.5）”或“红色”

然后使用渐变作为填充样式


var canvas=document.createElement（“canvas”）；
document.body.appendChild（画布）；
var ctx=canvas.getContext（“2d”）；
功能更新（时间）{
ctx.fillStyle=“黑色”；
ctx.fillRect（0，0，canvas.width，canvas.height）；
//分区在分数中的位置
var posRed=0.8+数学sin（时间/100）*0.091；
var posOrange=0.5+数学sin（时间/200）*0.2；
var posGreen=0.1+数学sin（时间/300）*0.1；
var pos={
x:canvas.width/2，
y:canvas.height/2
};
var-dist=100；
var ang1=2+数学sin（时间/1000）*0.5；
var ang2=4+数学sin（时间/1300）*0.5；
var grad=ctx.createRadialGradient（位置x，位置y，0，位置x，位置y，距离）；
渐变添加颜色停止（0，#0A0）；
渐变添加颜色停止（posGreen，#0A0）；
渐变添加颜色停止（posOrange，#F80”）；
渐变添加颜色停止（posRed，#F00”）；
渐变添加颜色停止（1，#000）；
ctx.fillStyle=梯度；
ctx.beginPath（）；
ctx.移动到（位置x、位置y）；
ctx.弧（位置x、位置y、距离ang1、ang2）；
ctx.fill（）；
requestAnimationFrame（更新）；
}
requestAnimationFrame（更新）