Question

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

Fiddle example:

https://jsfiddle.net/mwbgwa39/

如果有人可以帮助我，我将非常感激：）

Answer 1

重要的是在每个对象绘图开始时调用beginPath()，并在完成绘制该对象时调用closePath()。如果你不调用它，画布认为你正在尝试继续绘制最后一个对象。您可以在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。

的更多信息

Answer 2

你正在画一条路。每次你画一些东西，它都会继续你到目前为止所做的道路。您可以将beginPath移动到for循环中，为每个圆圈开始一条新路径：

        ctx.clearRect(0, 0, 400, 400);
        for(i in obj_t)
        {
            ctx.beginPath();
            // draw here
        }
        ctx.closePath();

请参阅操作：https://jsfiddle.net/mwbgwa39/4/

为什么，在javascript画布动画上创建几个对象后，它们是否已连接？

2 个答案: