drawImage（）按顺序绘制到画布并保持序列

Question

我在页面上设置了6个画布元素。添加<input type="file">按钮可添加图像。每次添加学生图像时，它应显示在画布规格上并按顺序从左到右放置。

我似乎无法将图像从左到右放置。

示例：第一个添加的图像应该在“can1”中，第二个添加的图像应该在“can2”中，第三个添加的图像在“can3”中。如果删除“can2”图像，“can3”应移动到“can2”的位置。

Answer 1

一种简单的方法是将每个图像存储在一个数组中，然后在添加/删除图像的任何时候，重新绘制每个画布。

var images = [],
    contexts = [ // collection of the canvas drawing contexts ];
function refreshCanvases() {
    for (var i = 0, len = contexts.length; i < len; i++) {
        var context = contexts[i],
            image = images[i];
        // I'm assuming you have width/height defined somewhere else
        context.clearRect(0, 0, width, height);
        if (image) {
            context.drawImage(image, x, y, width, height);
        }
    }
}

function addImage() {
    // Code for loading image...
    images.push(image);
    refreshCanvases();
}

然后起泡，冲洗，重复以去除图像。