html5 canvas：重疊的路徑沒有正確填充

HTML5 canvas的一個奇怪問題：我試圖在另一個內部繪製一個形狀。外部形狀是藍色，內部形狀是紅色，但最終的結果是兩種形狀都最終呈紅色。如果我單步執行代碼，則可以看到藍色形狀正確呈現，但紅色形狀呈現在藍色形狀上，儘管它比較小。可能是BeginPath/EndPath的問題，但我似乎嘗試過所有組合，但沒有運氣。在這之後我有更多的形狀可供繪製，所以我需要在繼續工作之前弄清楚如何正確地開始/結束形狀。任何幫助表示讚賞。html5 canvas：重疊的路徑沒有正確填充

 <script type="text/javascript"> 
      window.onload = function() { 
       var drawingCanvas = document.getElementById('canvas1'); 

       // Is element in the DOM and does browser support canvas 
       if (drawingCanvas && drawingCanvas.getContext) { 
        // Init drawing context 
        var InfieldColor = "#BDB76B"; 
        var OutfieldColor = "#F5F5F5"; 

        var iGrassLen = Math.min(drawingCanvas.width, drawingCanvas.height) * 0.7; 
        var iRad = iGrassLen * 1.475; 
        var iAng = -60 * Math.PI/180; 
        var iptInfBez0x = iRad * Math.cos(iAng); 
        var iptInfBez0y = -(iRad * Math.sin(iAng)); 

        iAng = -30 * Math.PI/180; 
        var iptInfBez1x = iRad * Math.cos(iAng); 
        var iptInfBez1y = -(iRad * Math.sin(iAng)); 
        var iInfieldLen = (iGrassLen * (88/124)); 

        var iBaseLen = iInfieldLen/12; 

        //this is the relative offset between Dixon infield and outfield 
        var iOutfieldLen = iGrassLen * (282/124) 

        //bezier control points for outfield circle 
        iRad = iOutfieldLen * 1.31; 
        iAng = -60 * Math.PI/180; 
        var iptOutBez0x = iRad * Math.cos(iAng); 
        var iptOutBez0y = -(iRad * Math.sin(iAng)); 

        iAng = -30 * Math.PI/180; 
        var iptOutBez1x = iRad * Math.cos(iAng); 
        var iptOutBez1y = -(iRad * Math.sin(iAng)); 

        var iHRLen0 = (340 * iInfieldLen/90) * 1.025;  //iInfieldLen = 90 feet. (plus a fudge factor) 
        var iHRLen1 = (370 * iInfieldLen/90) * 1.025; 
        var iHRLen2 = (400 * iInfieldLen/90) * 1.025; 

        var iMoundWid = iInfieldLen/10; 

        var context = drawingCanvas.getContext('2d'); 

        context.fillStyle = "#FFFF00"; 
        context.fillRect(0, 0, drawingCanvas.width, drawingCanvas.height); 

        context.beginPath; 
        context.moveTo(0, 0); 
        context.lineTo(iGrassLen, 0); 
        context.bezierCurveTo(iptInfBez1x, iptInfBez1y, iptInfBez0x, iptInfBez0y, 0, iGrassLen); // bezier curve 
        context.lineTo(0, 0); 
        context.closePath(); 
        context.fillStyle = "blue"; 
        context.fill(); 
        context.lineWidth = 1; 
        context.strokeStyle = "black"; 
        context.stroke(); 

        //infield rectangle 
        context.beginPath; 
        context.rect(0, 0, iInfieldLen - (iBaseLen/4), iInfieldLen - (iBaseLen/4)); 
        context.closePath; 
        context.fillStyle = "red"; 
        context.fill(); 
        context.lineWidth = 1; 
        context.strokeStyle = "black"; 
        context.stroke(); 

       } 
      } 
     </script>

來源

2011-10-18 taglius

context.beginPath; 
... 
context.closePath;

你忘了()。沒有這些，這些只是放棄對函數的引用，而不是調用它。

來源

2011-10-18 20:00:29 bobince

非常感謝javascript新手，我錯過了這個問題。我知道這在語法上是正確的，但是有沒有一個編輯會將此顯示爲潛在的錯誤？我是從Visual Studio開發.NET語言開始的，在開發JavaScript代碼時，我發現缺乏來自IDE的關於語法問題的幫助。 – taglius

[jslint]（http://jslint.com/）。儘管你必須關閉很多克羅克福德更加教條化和可疑的規則（例如，一變一變）來解決真正的問題。它還在'var iOutfieldLen'行上找到缺少的分號。 – bobince

非常感謝，該網站將剃掉我的JavaScript開發時間！ – taglius

html5 canvas：重疊的路徑沒有正確填充

回答

相關問題