Question

我尝试在画布上绘制多个圆圈，在绘制第一个圆圈后，会出现一条水平线。这是一个打印屏幕： https://imgur.com/a/IwP6l。

 var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');

        var distance_x_circle = 20;
        var distance_y_circle = 20;

        for (var i = 0; i < 8; i++) {

            context.arc(distance_x_circle, 20, 15, 0, 2 * Math.PI);
            context.stroke();

        distance_x_circle += 40;            


    }

Answer 1

您的所有圈子都被视为一条路径，这就是您获得该路线的原因。您可以使用CanvasRenderingContext2D.beginPath()为每个圈子开始一条新路径。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var distance_x_circle = 20;
var distance_y_circle = 20;

for (var i = 0; i < 8; i++) {

  context.beginPath();
  context.arc(distance_x_circle, 20, 15, 0, 2 * Math.PI);
  context.stroke();

  distance_x_circle += 40;            

}

<canvas id="canvas" width=500 height=100></canvas>

为什么arc（）函数在javascript中绘制一条线

1 个答案: