JavaScript中arc()函数为何绘制直线？Canvas多圆绘制异常咨询

嘿，我一眼就看出问题所在啦！你遇到的这条多余水平线，是因为Canvas的2D绘图上下文会累积路径导致的——你每次调用arc()都是在同一个路径上添加内容，而不是重新开始新路径。

具体来说：

• 第一次调用arc()后，路径的起点和终点都是第一个圆的(20,20)位置（因为是完整的圆）。
• 第二次循环时，你直接调用arc()，Canvas会自动从上次路径的终点（也就是第一个圆的起点）画一条直线到第二个圆的起点(60,20)，然后再绘制圆弧。这就是那条水平线的来源！

修复方案 #

只需要在每次绘制圆弧前，调用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;
}

原理补充 #

beginPath()会清空当前的路径列表，让后续的绘图命令（比如arc()、lineTo()）都在新的路径上执行，这样每次stroke()的时候只会绘制当前路径的内容，不会把之前的路径也一起画出来。

内容的提问来源于stack exchange，提问作者Triumfatorul32