for循环未与对象一起执行

debugcn 发表于 Dev

海德鹿

我正在使用Canvas玩和学习Javascript。目前，我正在创建一个圆，并将其显示在屏幕上的随机区域中。我能够完全完成该练习。一切都在一个功能中顺利运行。

现在，我想为该圆创建一个对象，并在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();

巴瑟姆

您正在呼叫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();

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。