javascript - HTML5 渐变 : changing color of gradient changes color of triangle on a canvas

Question

我正在服用HTML5 Tutorial太棒了。我到达了视频 Canvas 部分的径向渐变部分，大约 59 分 44 秒。我遇到一个问题，当我在径向渐变中更改渐变颜色时，我无法确定在哪里，它向三 Angular 形添加填充。 click here for a screenshot of the output .

canvas 的代码在一个 JS 文件中，这里是带有三 Angular 形和径向渐变的函数片段:

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;

当我移除径向渐变时，三 Angular 形恢复到原来的样子。 here is a screenshot or the correct looking triangle .

我尝试弄乱 var radGrad = ctx.createRadialGradient(275,250,5,290,260,100) 的参数，寻找可能匹配的数字并更改它们，寻求与径向渐变和三 Angular 形的冲突，但是没有成功。

谢谢!

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

Answer 1

我看了一下三 Angular 形和 arc，区别在于 ctx.beginPath(); 和 ctx.closePath();，并且它停止了我的第二个 radGrad.addColorStop(1,"pink") 或我添加的任何颜色以更改三 Angular 形的颜色。您可以在下面看到新代码和 screenshot here .

    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();