Javascript畫布填充相交形狀

我有這些函數繪製正則多邊形或由點數組定義的任何形狀。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(); 
}

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

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

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

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

來源

2014-02-05 Carl di Ortus

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

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

ctx.beginPath();

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

來源

2014-02-05 18:45:17 markE

你大概的意思'調用beginPath（）'而不是'beginShape（）'除非我錯過了一些新的方法？ – K3N

我發誓我在看兩天的代碼，嘗試所有的可能性..謝謝 –

@Ken是的，一個錯字！我想我應該扭轉我的處理順序（1）類型（2）認爲==>（2）然後（1）！ – markE

Javascript畫布填充相交形狀

回答

相關問題