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

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

但问题是为什么会多出以下一行？

我怎样才能去掉那条线？

- Wai Yan Hein

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>

- Aminadav Glickshtein