jquery - JQuery For 循环动画

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 文档控制每个人的高度 非常感谢您的帮助！

Answer 1

我认为你应该将你的“盒子”元素存储在一个数组中，并在每次盒子之一发生变化时使用一个函数来重绘画布：

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。