创建一个canvas元素数组

Question

我想创建一个canvas控件数组。

到目前为止，这是我的代码：

var j = new Array();
var canvas = new Array();
var ctx = new Array();
var d = new Array();

for (var i = 0; j < 16; i++) {
    j[i] = new JpegImage();
    canvas[i] = document.createElement("canvas" + i);
    ctx[i] = canvas[i].getContext("2d");
    d[i] = ctx[i].getImageData(0, 0, 180, 119);

    j[i].onload = function () {
        j[i].copyToImageData(dHidden1);
        ctx[i].putImageData(d[i], 0, 0);
        ctxHidden.drawImage(canvas[i], 0, 0, 180, 119);
    };
}

我收到此错误：

Answer 1

您的代码最终会调用例如：

document.createElement('canvas0');

而且canvas0不是有效的html标记，因此不会创建任何画布，因此也无法调用getContext。

在你的循环中，只需使用：

    canvas[i] = document.createElement("canvas");