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

我认为你应该将'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。

JQuery For循环动画

1 个答案: