Question

问题：我在画布上画了一艘宇宙飞船。当它悬停在它的x / y上时，我在画布上绘制一个圆弧，表示星舰武器角度和范围（考虑星舰目前的Baring / faces）。目前，确定的角度以绿色绘制并延伸到武器范围值允许的范围。

然而，我想使用渐变来填充确定的弧以指示精度的下降（即，渐变开始于绿色，移动到橙色，变得越红，越远离星舰位置角度是）。

但是，我不知道如何用渐变替换我在绘制圆弧上的股票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函数将位置x，y和起始半径以及渐变的位置x，y和结束半径取6个数字。

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

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

ntpdate -s time.nist.gov

画一个角度/圆弧，在画布上充满光芒？

1 个答案: