使用具有额外行的JavaScript在HTML画布上绘制多个椭圆形状

Question

我想了解更多有关HTML canvas和JavaScript的信息。现在我试图绘制多个相互重叠的椭圆形状，尺寸将逐渐变小。我可以成功地绘制形状。

这是我的代码

SKLabelNode

当我在浏览器上运行我的代码时，它会显示如下。

但问题是为什么包含额外的行如下？

我怎样摆脱那条线？

Answer 1

您错过了context.beginPath。请参阅此JSFIddle：https://jsfiddle.net/zwcd7hcw/

function drawOvalShape(context, center_x, center_y, width, height){
        context.beginPath()
        context.ellipse(center_x, center_y, width, height,  90 * Math.PI/180, 0, 2 * Math.PI);
        context.stroke();
}

 var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var center_x = 200;
    var center_y = 100;
    var width = 100;
    var height = 200;
    drawOvalShape(context, 200, 100, 100, 200);
    drawOvalShape(context, 200, 100, 80, 180);
    drawOvalShape(context, 200, 100, 60, 160);
    drawOvalShape(context, 200, 100, 40, 140);
    drawOvalShape(context, 200, 100, 20, 120);

    function drawOvalShape(context, center_x, center_y, width, height){
			context.beginPath()
        context.ellipse(center_x, center_y, width, height,  90 * Math.PI/180, 0, 2 * Math.PI);

       context.stroke();
    }

<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000000;">
</canvas>