for循環使用動態創建一個畫布

Question

內繪製的圖像這是我的代碼：

<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循環來生成所有這些畫布中的圖像。

Answer 1

你可以用這個嘗試：

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