javascript - drawImage() 按顺序 Canvas 并维护顺序

Question

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

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

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

Answer 1

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

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();
}

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