Javascript畫布填充相交形狀

Question

我有這些函數繪製正則多邊形或由點數組定義的任何形狀。

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

多邊形和形狀都很好，問題是填充顏色。 如果我調用順序如下：

plotpolygon(94, 3, 'yellow'); 
plotshape(xpoints, ypoints, 'brown'); 

結果應該是黃色三角形與棕色形狀部分重疊它。 但是，我得到的形狀重疊的地方 - 黃色，不重疊的地方 - 棕色。 我已經嘗試過mozilla建議的構圖，但它沒有幫助。

對我來說更奇怪的是，我在畫布上放置了更多的多邊形，總是將它們放在頂部 - 它們大部分都是重疊的，但它們都有自己的顏色。這是當我添加一個形狀問題開始發生..

Answer 1

你有一個錯字，導致第一個三角形繪圖樣式繼續在plotshape。

修復：內部plotshape調用beginPath必須有括號：

ctx.beginPath(); 

稍微重構演示：http://jsfiddle.net/m1erickson/adHdr/