Question

我正在接受一个非常棒的HTML5 Tutorial。我得到了视频画布部分的径向渐变部分，大约59分44秒。我遇到了一个问题，我无法确定何时更改径向渐变中渐变的颜色，它为三角形添加填充。 click here for a screenshot of the output

画布的代码位于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;

当我移除径向渐变时，三角形会回到原来的状态。 here is a screenshot or the correct looking triangle

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

谢谢！

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

Answer 1

我看了他的三角形和arc，差异是ctx.beginPath();和ctx.closePath();，它停止了我的第二个radGrad.addColorStop(1,"pink")或我添加的任何颜色改变三角形的颜色。您可以在下面看到新代码和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();

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

1 个答案: