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

Question

我想了解更多有关 HTML 画布和 JavaScript 的信息。现在我正在尝试绘制多个彼此重叠的椭圆形，并且尺寸会一个接一个地变小。我可以成功地绘制形状。

这是我的代码

<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000000;">
</canvas>
<script type="text/javascript">
    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.ellipse(center_x, center_y, width, height,  90 * Math.PI/180, 0, 2 * Math.PI);

        context.stroke();
    }
</script>

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

但问题是为什么要多加一行，如下所示？

我怎样才能摆脱那条线？

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

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