for循环不执行对象

Question

我正在使用 Canvas 与 Javascript 一起玩耍和学习。目前我正在创建一个圆圈并将其显示在屏幕上的运行dom 区域中。我能够完全完成那个练习；一切都运行在一个功能中顺利进行。

现在我想为圆创建一个对象并在for循环中调用它。我创建了对象，但仍然有问题。我只看到一个圆圈而不是 40 个。在来这里寻求帮助之前，我为此苦苦思索了一会儿。看看下面的代码。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

if (!ctx) {
  alert('HTML5 Canvas is not supported in you browser');
}

function Circle(posX, posY, radius, startAngle, endAngle, anticlockwise) {
    this.posX = posX;
    this.posY = posY;
    this.radius = radius;
    this.startAngle = startAngle;
    this.endAngle = endAngle;
    this.anticlockwise = anticlockwise;

    this.test = function() {
        ctx.beginPath();
        ctx.arc(posX, posY, radius, startAngle, endAngle, anticlockwise);
        ctx.fill();
  }
}

var cir = new Circle(
    (Math.random() * canvas.width),
    (Math.random() * canvas.height),
    20,
    0,
    Math.PI*2,
    true
);

function drawCircle() {
        for(var i = 0; i < 40; i++){
        cir.test(); 

        }
}

/*setInterval(drawCircle, 400)*/
 drawCircle();

Answer 1

您正在调用 cir.test() 40 次而没有 40 个 Circle 实例。这是同一个圆在其自身之上绘制 40 次。

这可能会立即解决您的问题：

function drawCircle() {
        for(var i = 0; i < 40; i++){
            // Mind you that doing this
            // Will not allow you to reference
            // your circles after they are
            // created. The best method is 
            // to put them in an array
            // of circles
            var cir = new Circle(
                (Math.random() * canvas.width),
                (Math.random() * canvas.height),
                20,
                0,
                Math.PI*2,
                true
            );

            cir.test();
        }
}

/*setInterval(drawCircle, 400)*/
 drawCircle();

但是，我建议对您的代码进行以下更改：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

if (!ctx) {
  alert('HTML5 Canvas is not supported in you browser');
}

function Circle(posX, posY, radius, startAngle, endAngle, anticlockwise) {
    this.posX = posX;
    this.posY = posY;
    this.radius = radius;
    this.startAngle = startAngle;
    this.endAngle = endAngle;
    this.anticlockwise = anticlockwise;

    // Using better function names
    // is always a good idea
    this.testDraw = function() {
        ctx.beginPath();
        ctx.arc(posX, posY, radius, startAngle, endAngle, anticlockwise);
        ctx.fill();
  }
}

// Create an array to fill
// with Circle instances
var circlesArray = []

// Changed drawCircle to drawCircles
// it is clearer
function drawCircles() {
    for(var i = 0; i < 40; i++){
        // Create new Circle objects
        // and add them to the circlesArray
        // this will allow you to have a
        // each circle later on
        circlesArray.push(new Circle(
            (Math.random() * canvas.width),
            (Math.random() * canvas.height),
            20,
            0,
            Math.PI*2,
            true
        ));

        // Go through each item of the array
        // and call the test function
        circlesArray[i].testDraw();
    }
}

/*setInterval(drawCircle, 400)*/
 drawCircles();

Answer 2

目前您的 drawCircle() 函数是运行对同一个 'cir' 变量的单个测试函数 40 次。您要做的是使用 for 循环用 40 个新项填充一个数组。然后，使用另一个 for 循环将这些项目定义为新的 Circle 对象，并在每个新圆上调用测试函数。这是我将使用的代码：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

if (!ctx) {
  alert('HTML5 Canvas is not supported in you browser');
}

function Circle(posX, posY, radius, startAngle, endAngle, anticlockwise) {
  this.posX = posX;
  this.posY = posY;
  this.radius = radius;
  this.startAngle = startAngle;
  this.endAngle = endAngle;
  this.anticlockwise = anticlockwise;

  this.test = function() {
    ctx.beginPath();
    ctx.arc(posX, posY, radius, startAngle, endAngle, anticlockwise);
    ctx.fill();
  }
}

/*Create an array to hold your circles*/
var circleArray = [];

function drawCircle() {
  for (var i = 0; i < 40; i++) {
    circleArray.push('cirlce' + i); /*Push circle variable into circleArray*/
  }
  for (var i = 0; i < circleArray.length; i++) {
    /*Create a new circle object for every iteration of the circleArray*/
    circleArray[i] = new Circle(
      (Math.random() * canvas.width), (Math.random() * canvas.height),
      20,
      0,
      Math.PI * 2,
      true
    );
    circleArray[i].test(); /*Run the test function for every item in the circle array*/
  }
}

/*setInterval(drawCircle, 400)*/
drawCircle();

<canvas id='canvas'></canvas>

Answer 3

请阅读评论，如果您需要更多帮助来理解下面的评论。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

if (!ctx) {
  alert('HTML5 Canvas is not supported in you browser');
}
//The only thing I can see perhaps changing is radius so use radius as parameter
function Circle(radius) {
    this.posX = Math.random() * canvas.width; //This is always going to be the same so no need to pass as an argument
    this.posY = Math.random() * canvas.height; //So will this
    this.test = function() {
        ctx.beginPath();
        ctx.arc(this.posX, this.posY, radius, 0, Math.PI*2, true); //So will Math.PI*2, and true
        ctx.fill();
    }
    this.test();
}

function drawCircle() {
    for(var i = 0; i < 40; i++){
        new Circle(i); //This passes i as the radius so you can see the differences
    }
}

drawCircle();

for循环不执行对象

for loop not performing with object

javascript

for-loop

canvas

object

html5-canvas