html5 canvas：重叠路径未正确填充 [英] html5 canvas: overlapping paths not filling correctly

问题描述

HTML5 canvas的奇怪问题：我试图在另一个中绘制一个形状。外形为蓝色，内层为红色，但最终结果是两个形状都呈红色。如果我单步执行代码，我可以看到正确渲染的蓝色形状，但随后红色形状呈现在蓝色形状上，即使它更小。可能是BeginPath / EndPath的问题，但我似乎尝试了所有组合而没有运气。在这之后我有更多的形状可供绘制，所以我需要弄清楚如何在恢复工作之前正确地开始/结束形状。任何帮助表示赞赏。

strange issue with HTML5 canvas: I am trying to draw one shape inside another. The outer shape is blue and the inner one red, but the end result is that both shapes end up red. If I step through the code, I can see the blue shape rendered correctly, but then the red shape renders over the blue one, even though it's smaller. Probably a problem with BeginPath/EndPath stuff, but I've seemingly tried every combination with no luck. I have lots more shapes to draw after this one, so I need to figure out how to correctly begin/end a shape before I resume work. Any help is appreciated.

     <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>

推荐答案

context.beginPath;
...
context.closePath;

您忘了（）。没有它，这些只是对函数的废弃引用，而不是对函数的调用。

You forgot (). Without that, these are just discarded references to a function, not calls to it.

这篇关于html5 canvas：重叠路径未正确填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！