javascript - 循环绘制许多 Canvas ？

Question

我有这个命令可以完美地工作，正如我想要的:http://jsfiddle.net/m1erickson/64BHx/

所以我不知道会这么难，所以在这里画画:

http://www.afriquinfos.com/fotografias/fotosnoticias/2012/2/10/int-26146.jpg

好吧，我尝试做的是以下内容:你们可以在这个链接上观看:http://jsfiddle.net/whm3n/

• 我创建了 5 个 Canvas ，这将是上面 drawingcanvas 中的数字
• 在 javascript 的数组中，他是否一次获得了所有 Canvas
• 点击后打算显示该类的内容， 关于(支持，登录...)的警告

我觉得问题出在这里:

  for(b=0;b<6;b++){

var canvas + '_' + b = document.getElementById("canvas");
var context + '_' + b  = canvas.getContext("2d");
var $canvas + '_' + b  = $("#canvas");
var canvasOffset + '_' + b  = $canvas + '_' + b.offset();
var offsetX + '_' + b  = canvasOffset + '_' + b.left;
var offsetY + '_' + b  = canvasOffset + '_' + b.top;

}

有人可以帮助我吗？

Answer 1

如果你想使用动态变量名，我建议你使用数组表示法。 试试这个:

var canvas = [],
    context = [],
    $canvas = [],
    canvasOffset = [],
    offsetX = [],
    offsetY = [];

for ( b = 0; b < 6; b++ ) {
    canvas[b] = document.getElementById("canvas_" + b),
    context[b]  = canvas[b].getContext("2d"),
    $canvas[b]  = $("#canvas_" + b),
    canvasOffset[b]  = $canvas[b].offset(),
    offsetX[b]  = canvasOffset[b].left,
    offsetY[b]  = canvasOffset[b].top;
}

这是你的 fiddle :http://jsfiddle.net/whm3n/2/

它应该可以帮助您从这里继续。