画布类javascript

我的javascript代码有问题。我试图创建一组移动的圆，其中每个圆都有自己的属性。到目前为止，我已经成功地将所有需要的值输入到一个数组中，但我不知道如何正确地使用它们在画布上绘制

下面是javascript：

var radius = 10;
var step = x = y = 0;
var r = g = b = 255;
var circleHolder = [];
var loop = setInterval(function(){update();}, 30);

function Circle(x, y, radius, r, g, b)
{
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.r = r;
    this.g = g;
    this.b = b;
    circleHolder.push(this);
}

Circle.prototype.draw = function()
{
    Circle.prototype.ctx = document.getElementById("MyCanvas").getContext("2d");
    Circle.prototype.ctx.clearRect(0,0,720,720); // clear canvas
    Circle.prototype.ctx.beginPath();
    Circle.prototype.ctx.strokeStyle = "rgb("+ this.r +", "+ this.g +", "+ this.b +")";
    Circle.prototype.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    Circle.prototype.ctx.stroke();
}

Circle.prototype.update = function ()
{
    step += .02;
    step %= 2 * Math.PI;
    this.x = parseInt((Math.sin(step)) * 150) + 360;
    this.y = parseInt((Math.cos(step)) * 150) + 360;
    this.radius += 16;
    if (this.radius > 200)
    {
        for (i in circleHolder)
        {
            if (circleHolder[i]==this)
            {
                circleHolder.splice(i, 1);
            }
        }
    }
}

function update()
{
    var ci = new Circle(x, y, radius, r, g, b);
    for (i in circleHolder)
    {
        ci = circleHolder[i];
        ci.update();
        ci.draw();
    }
}

我很确定我的问题在update（）{}中，但我不知道如何正确地完成它

---

编辑：好的，我对它进行了一些修改不过我在控制台中遇到了“ci未定义”错误，它有一个奇怪的错误：将“if（this.radius>128）”更改为更高的整数会使圆旋转得更快，我不知道为什么。如果你愿意，你可以试着把它改成256，看看会发生什么

for (var i=0; i < allCircles; i++)
        {
            ci = circleHolder[i]; <----- This is causing the error
            ci.update();
            ci.draw();
        }

for（变量i=0；ici=circleHolder[i]；我不是100%清楚你想做什么，但我试图解决主要问题

一个问题是你的
for
循环。你不应该在数组中使用
for，而应该这样做：

for (var i=0 ; i<circleHolder.length ; i++)
{
    ci = circleHolder[i];
    ci.update();
    ci.draw();
}

for（var i=0；i对于初学者，除非在代码之外还有其他事情发生：

在数组中使用
表示…in…
，因为in表示对象，在数组中使用时，大多数浏览器将包括
.splice
和
.forEach
等方法，而不仅仅是数字
0…n
索引

函数splice（）{}.draw（）；
结尾不好

另外，页面背景的颜色是什么？您正在将每个圆圈的rgb颜色设置为100%白色。您还正在清除画布……这很可能意味着整个内容是透明的。因此，如果您有一个透明的画布、白色圆圈和白色背景，您很可能看不到任何事情都可以，如果这项工作没有出现错误。

以一种让你能够跟踪所发生的事情的方式来改变你的逻辑可能更有意义

如果你做了一个圈构造器，除了做一个新的圈，别让它做任何事情

在更新的内部，创建一个圆圈。

然后将其放入循环集合中（而不是循环构造函数中）

在大型应用程序中，通常会对所有对象调用update，然后对所有对象调用draw，而不是一次更新和绘制一个对象。
例如，想象一个游戏，在吸引你并让你移动之前，你不需要检查你是否被子弹击中

因此，在循环内部，应该有一个
更新
和一个
绘图
。
在
更新
中，创建圆并将其添加到列表中，并更新其位置。
在
绘图
的内部，绘制圆圈

将来，这将为您带来一些好处，比如碰撞检测，而无需每帧多次重新绘制所有内容

另外，不要在将被多次调用的函数中进行DOM访问（
Circle.draw
）。
这将在将来破坏您的帧速率

相反，向函数传递一个依赖项（画布）

//在主游戏范围内
var screen=document.getElementById（…）.getContext（“2d”）；
//在动画/游戏循环中的新绘图函数内部
var i=0，allCircles=circleHolder.length，currentCircle；
对于（；i
您是否收到任何错误消息？（顺便说一句，在
update（）
中，
i
未声明。）最好使用
for
循环或
forEach（）
迭代数组的方法。我应该提到我的背景是黑色，所以白色确实是目前最好的颜色。我使用这段代码的目的是简单地创建一个圆周运动的圆，在第一个圆后面有一个稍大一点的圆的轨迹。我使用Pygame库（一个现在我正试图将其“移植”到javascript中，只是为了学习。我会尝试修改我的代码，如果我能让它工作，我会发布它：）好吧，那么你的问题是，你在每次更新时都会创建一个圆圈。我想这张图片值千言万语，所以这正是我想要实现的，这张图片来自我的Python/pygame版本：
// inside of the main game's scope
var screen = document.getElementById(...).getContext("2d");


// inside of your new draw function, in the animation/game loop
var i = 0, allCircles = circleHolder.length, currentCircle;

for (; i < allCircles; i += 1) {
    currentCircle = circleHolder[i];
    currentCircle.draw(screen);
}