Javascript画布填充相交形状

我有这些函数来绘制正多边形或由点数组定义的任何形状

function polygon(ctx, x, y, radius, sides, startAngle, anticlockwise) {
    if (sides < 3) return;
    var a = (Math.PI * 2)/sides;
    a = anticlockwise?-a:a;
    ctx.save();
    ctx.translate(x,y);
    ctx.rotate(startAngle);
    ctx.moveTo(radius, 0);
    for (var i = 1; i < sides; i++) {
        ctx.lineTo(radius*Math.cos(a*i), radius*Math.sin(a*i));
    }
    ctx.closePath();
    ctx.restore();
}

function plotpolygon(radius, sides, color) {
    var context = document.getElementById("logo-canvas").getContext('2d');
    context.beginPath();
    polygon(context, 256, 256, radius, sides, -Math.PI/2);
    context.fillStyle = color;
    context.fill();
    context.stroke();
}

function plotshape(xpoints, ypoints, color) {
    var context = document.getElementById("logo-canvas").getContext('2d');
    context.beginPath;
    context.moveTo(xpoints[0], ypoints[0]);
    for (var i=1; i < xpoints.length; i++) {
            context.lineTo(xpoints[i], ypoints[i]);
    }
    context.closePath();
    context.fillStyle = color;
    context.fill();
    context.stroke();
}

结果应该是黄色三角形，棕色部分重叠。 然而，我得到了形状重叠的地方——黄色，没有重叠的地方——棕色。 我已经试过按作者的建议写作文，但没用

---

对我来说更奇怪的是，我在画布上有更多的多边形，总是把它们放在上面——它们大多数是重叠的，但它们有自己的颜色。当我添加形状时，问题开始出现。

您的打字错误导致第一个三角形图形样式在plotshape中继续

修复：plotshape内的beginPath必须有括号：

ctx.beginPath();

---

稍微重构的演示：

你可能是指

beginPath（）

而不是

beginShape（）

，除非我错过了一些新方法？我发誓我已经看了两天的代码，尝试了所有的可能性。。感谢you@Ken是的，打字错误！我想我应该颠倒我的处理顺序（1）类型（2）思考==>（2）然后（1）！

ctx.beginPath();