Javascript HTML5渐变：更改渐变颜色会更改画布上三角形的颜色

我正在参加一个非常棒的比赛。我看到了视频画布部分的径向渐变部分，大约59分44秒。我有一个问题，我无法确定当我在径向渐变中更改渐变颜色时，它会在三角形中添加填充

画布的代码位于JS文件中，下面是带有三角形和径向渐变的函数片段：

function init(){
    var canvas = document.getElementById("canvas");

    if(canvas.getContext){
        var ctx = canvas.getContext("2d");
        // rectangles
        ctx.fillStyle = "#FAEBD7";
        ctx.fillRect(0,0,canvas.width,canvas.height);

        // triangle
        ctx.fillStyle = "yellow";
        ctx.beginPath();
        ctx.moveTo(350,200);
        ctx.lineTo(400,50);
        ctx.lineTo(450,200);
        ctx.closePath();
        ctx.fill();

        // add stroke to triangle
        ctx.strokeStyle = "green";
        ctx.beginPath();
        ctx.moveTo(350,200);
        ctx.lineTo(400,50);
        ctx.lineTo(450,200);
        ctx.closePath();
        ctx.stroke();

        // radial gradient
        var radGrad = ctx.createRadialGradient(275,250,5,290,260,100);
        radGrad.addColorStop(0,"red");
        radGrad.addColorStop(1,"pink");
        ctx.fillStyle=radGrad;
        ctx.arc(250,200,25,0,Math.PI*2,true);
        ctx.fill(); 
    }
}

onload = init;

当我去掉径向梯度时，三角形恢复到原来的样子

我试着处理

var radGrad=ctx.createRadialGradient（275250,5290260100）

的参数，寻找可能匹配的数字并更改它们，寻找与径向梯度和三角形的冲突，但没有成功

谢谢大家!

---

请帮帮我，这样我就可以得到页面上的径向渐变和正确的三角形。

我看了三角形和

弧，区别在于
ctx.beginPath（）和
ctx.closePath（），它停止了我的第二个
radGrad.addColorStop（1，“粉色”）
或我添加的任何颜色来更改三角形的颜色。您可以在下面看到新代码和一个

我已经在这里做了一些改变来做你的梯度定位，但是我有点不确定你在问什么，如果它是梯度的位置，它应该是最高的效果。还有一点值得一读：@JonathanNewton在我发布的截图中，它显示了三角形与圆形不同的风格。圆应该有自己的梯度。无论我对圆做什么，三角形都会得到其中一种颜色。我不明白为什么。即使三角形的填充样式是“黄色”，但它仍然是与圆相同的精确渐变。closePath对您来说是无用的arc@Kaiido是的，但它解决了我的问题。不，beginPath解决了，closePath在这里没用。@Kaido好的，谢谢。我明白了，beginPath（）启动了新路径，没有它，我仍然在编辑上一张图形。是吗？是的，就是这样
closePath（）
只是一个
lineTo（第一个\u声明的\u点\u或最后一个\u移动的\u点）
    var radGrad = ctx.createRadialGradient(275,250,5,290,260,100);
    radGrad.addColorStop(0,"red");
    radGrad.addColorStop(1,"pink");
    ctx.fillStyle=radGrad;
    ctx.beginPath();
    ctx.arc(250,200,25,0,Math.PI*2,true);
    ctx.closePath();
    ctx.fill();