jQuery循环动画

Question

简单来说，我想使用Canvas绘制10个带有自己标识符的矩形。以下是我目前的代码，但我知道它完全错误：

$(document).ready(function(){
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    for(i=0;i<10;i++){
        var b = new Box();
        context.drawImage(b, i*20,20);
    }
});

function Box() {
    this.x = 0;
    this.y = 0;
    this.width = 10;
    this.height = 10;
    this.fill = '#444444';
}

我希望给每个元素分配一个ID，这样我就可以通过一个XML文档控制每个元素的高度。非常感谢你的帮助！

- user2776096

---

你想使用 drawImage 绘制的图片在哪里？你的问题不够清晰。你可以编辑并添加更多细节。 - letiagoalves

Answer 1

我认为你应该将“Box”元素存储在一个数组中，并使用一个函数在每次框发生更改时重新绘制画布：

var boxes = [];
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

$(document).ready(function(){
    for(i=0;i<10;i++){
        boxes.push(new Box());
    }
    refreshCanvas();
});

function refreshCanvas()
{
    // -- Clear canvas:
    context .clearRect(0, 0, canvas.width, canvas.height);

    // -- Draw boxes:
    for(i=0; i<boxes.length; i++){
        context.beginPath();
        context.rect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height);
        context.stroke();
    }
}

function Box() {
    this.x = 0;
    this.y = 0;
    this.width = 10;
    this.height = 10;
    this.fill = '#444444';
}

那么，每当您修改其中一个框时，只需调用refreshCanvas即可。

- Scalpweb

---

非常感谢您，尽管它没有成功地将任何内容推入数组中，但 Box() 方法确实被调用了。 感谢您的耐心 - 我对此还很陌生。 - user2776096

在“boxes”和“.push”之间有一个不必要的空格，并且使用了“[]”而不是“()”。我修正了我的答案，请确保您也这样做，它应该可以工作。 - Scalpweb

实际上，我还修复了其他一些问题。请完全更新您的代码。 - Scalpweb

谢谢！是的，我注意到语法了。太好了 - 现在可以运行了。谢谢你。 - user2776096

好的，非常好 :) 请勾选下面投票数旁边的灰色方框，将我的回答标记为已采纳。这样人们就会知道这是正确的解决方案。谢谢。 - Scalpweb

+1 很好的回答。在你的 for 循环中，你可以考虑使用 var box=boxes[i]，然后使用 context.rect(box.x, box.y, box.width, box.height)。 - markE