javascript - 为什么在javascript Canvas 动画上创建几个对象后，它们是连接在一起的？

Question

我的 javascript Canvas 有问题。 我试图在 Canvas 上放置几个在 Canvas 边缘移动和弹跳的对象。如果我创建一个对象，它没有问题，但如果我想创建更多对象，它们就会连接起来。

Fiddle example:

https://jsfiddle.net/mwbgwa39/

如果有人能帮助我，我将非常感激:)

Answer 1

重要的是在每个对象绘制开始时调用 beginPath() ，并在完成绘制该对象时调用 closePath() 。如果您不调用它， Canvas 会认为您正在尝试继续绘制最后一个对象。您可以阅读更多内容MDN

        for(i in obj_t)
            {
                ctx.beginPath();
                obj_t[i].xPos = obj_t[i].xPos + obj_t[i].xVel;
                obj_t[i].yPos = obj_t[i].yPos + obj_t[i].yVel;
                ctx.arc(obj_t[i].xPos, obj_t[i].yPos, obj_t[i].r, 0, 2 * Math.PI);


                ctx.stroke();
                ctx.fill();
                ctx.closePath(); // optional
            }

编辑:正如 Kaiido 注意到的那样，在此示例中调用 closePath() 是不必要的。有关何时应调用 closePath() 的更多信息 can be found in this SO question .