这是我的代码:
<canvas id="hour6" width="1024px" height="764px">
<img id="hour6map" src=""/>
</canvas>
<canvas id="hour12" width="1024px" height="764px">
<img id="hour12map" src=""/>
</canvas>
<canvas id="hour18" width="1024px" height="764px">
<img id="hour18map" src=""/>
</canvas>
<canvas id="hour24" width="1024px" height="764px">
<img id="hour24map" src=""/>
</canvas>
<canvas id="hour30" width="1024px" height="764px">
<img id="hour30map" src=""/>
</canvas>
<canvas id="hour36" width="1024px" height="764px">
<img id="hour36map" src=""/>
</canvas>
<canvas id="hour42" width="1024px" height="764px">
<img id="hour42map" src=""/>
</canvas>
<canvas id="hour48" width="1024px" height="764px">
<img id="hour48map" src=""/>
</canvas>
我需要能够使用for循环在画布中动态创建所有这些图像。任何人都可以告诉我如何使用for循环生成所有这些包含图像的画布。
答案 0 :(得分:2)
你可以试试这个:
var canvas,
img,
index;
for (var i = 0; i < 8; i++) {
index = 6 * (i + 1);
canvas = document.createElement("canvas");
canvas.id = "hour" + index;
canvas.width = 1024;
canvas.height = 764;
img = document.createElement("img");
img.id = "hour" + index + "map";
img.src = "";
canvas.appendChild(img);
document.body.appendChild(canvas);
}