Javascript 画布圆圈和线条

如你所见，我试着画两个圆和一条线。当你点击第一圈时，你可以修改线的位置。 我有两个问题：

如何删除第二行？（仅当我添加第二个圆时，第二行才向上显示。）

如何在

mouseup

事件后停止“动画”

---

您只开始一条路径，因此两个圆之间的线，并且

start

在

if

语句中始终为真-您应该将其放入

mousemove

侦听器中，并且只附加一次

这将创建一个圆弧：

context.arc(x,y,radius,0,2*Math.PI);

然后，这会在同一条路径上创建一条弧，所以从最后一条的端点到这一条的起点有一条线：

context.arc(x1,y1,radius,0,2*Math.PI);

相反，只需将它们放在不同的路径中：

context.beginPath();
context.arc(x,y,radius,0,2*Math.PI);
context.stroke();

context.beginPath();
context.arc(x1,y1,radius,0,2*Math.PI);

context.moveTo(x,y);
context.lineTo(x1,y1);
context.stroke();

---

您只开始一条路径，因此两个圆之间的线和

start

在

if

语句中始终为真-您应该将其放入

mousemove

侦听器中，并且只附加一次

这将创建一个圆弧：

context.arc(x,y,radius,0,2*Math.PI);

然后，这会在同一条路径上创建一条弧，所以从最后一条的端点到这一条的起点有一条线：

context.arc(x1,y1,radius,0,2*Math.PI);

相反，只需将它们放在不同的路径中：

context.beginPath();
context.arc(x,y,radius,0,2*Math.PI);
context.stroke();

context.beginPath();
context.arc(x1,y1,radius,0,2*Math.PI);

context.moveTo(x,y);
context.lineTo(x1,y1);
context.stroke();

---

修复了停止动画部分。请看一看。修复了停止动画部分。看一看。很抱歉在minitech发布了两篇文章。没有注意到你已经发布了答案@哈莎：从版本号来看，你是先做的：-）对不起，我发了两个帖子@minitech。没有注意到你已经发布了答案@哈莎：从版本号来看，你是先做的：-）