html循环空间图片,HTML5在画布上使用for循环绘制图片？

所以，我想创建一个使用HTML5的minecraft网站主题。我在HTML5/Javascript中有点不稳定(有一段时间没有用过)，我需要一些帮助。我正在尝试计算可以放在屏幕上的16x16px数量的瓷砖。然后，为屏幕背景随机“生成地图”。然后，我使用相同的2 for循环来生成地图，以填充画面(在生成过程中分配画面路径)。问题是，画布完全是白色的。任何人都可以挑出问题，如果可能的话给我任何提示？提前致谢！这里是我的HTML5代码：HTML5在画布上使用for循环绘制图片？

Minecraft Background Check

"use strict";

var c = document.getElementById("bg");

var ctx = c.getContext("2d");

ctx.canvas.width = window.innerWidth;

ctx.canvas.height = window.innerHeight;

var width = Math.ceil(window.innerWidth/16);

var height = Math.ceil(window.innerHeight/16);

for (var x=0;x

{

for(var y=0;y

{

var rand = Math.floor(Math.random()*11);

var texLoc = getImageNameFromRand(rand,y,height);

var img=new Image();

img.onload = function(){

return function() {

ctx.drawImage(img,x*16,y*16);

};

};

img.src=texLoc;

}

}

function getImageNameFromRand(rand,yVal,maxY)

{

var dirt = 'dirt.png';

var stone = 'stone.png';

var cobble = 'cobble.png';

var mosscobble = 'mosscobble.png';

var bedrock = 'bedrock.png';

if(yVal===0)

{

return dirt;

} else if(yVal<3)

{

if(rand < 7) {

return dirt; }

else {

return stone; }

} else if(yVal<5)

{

if(rand < 4) {

return dirt; }

else {

return stone; }

} else if(yVal

{

if(rand === 0) {

return dirt; }

else if(rand < 4) {

return cobble; }

else if(rand < 5) {

return mosscobble; }

else {

return stone; }

} else if(yVal

{

if(rand < 4) {

return bedrock; }

else {

return stone; }

} else if(yVal

{

if(rand < 7) {

return bedrock; }

else {

return stone; }

} else {

return bedrock; }

return bedrock;

}

2012-03-07

Flafla2