javascript - 在 Canvas 上绘制一个充满辐射的 Angular/弧线？

Question

问题:我在 Canvas 上画一艘宇宙飞船。将鼠标悬停在其 x/y 上时，我在 Canvas 上绘制一条弧线，指示星舰武器 Angular 和范围(考虑星舰当前的巴林/朝向)。目前确定的 Angular 以绿色绘制，并延伸到武器射程值允许的范围内。

但是，我想使用渐变来填充确定的弧线​​以指示准确性的下降(即渐变从绿色开始，移动到橙色，距离星舰位置 Angular 越远则变为红色)。

但是，我不知道如何用渐变替换绘制弧上的库存 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;
}

是否可以替换 arc/globalalpha/fill，以便使用渐变流而不是固定颜色，如果可以，如何实现？

谢谢

Answer 1

用渐变填充弧线，动画只是为了好玩。

使用径向渐变并将色标设置为距离的分数。

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

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

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

var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");

function update(time) {
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  // position of zones in fractions
  var posRed = 0.8  + Math.sin(time / 100) * 0.091; 
  var posOrange = 0.5 + Math.sin(time / 200) * 0.2;
  var posGreen = 0.1 + Math.sin(time / 300) * 0.1;
  var pos = {
    x: canvas.width / 2,
    y: canvas.height / 2
  };

  var dist = 100;
  var ang1 = 2 + Math.sin(time / 1000) * 0.5;
  var ang2 = 4 + Math.sin(time / 1300) * 0.5;
  var grad = ctx.createRadialGradient(pos.x, pos.y, 0, pos.x, pos.y, dist);
  grad.addColorStop(0, "#0A0");
  grad.addColorStop(posGreen, "#0A0");
  grad.addColorStop(posOrange, "#F80");
  grad.addColorStop(posRed, "#F00");
  grad.addColorStop(1, "#000");

  ctx.fillStyle = grad;
  ctx.beginPath();
  ctx.moveTo(pos.x, pos.y);
  ctx.arc(pos.x, pos.y, dist, ang1, ang2);
  ctx.fill();
  requestAnimationFrame(update);
}
requestAnimationFrame(update);