html插入循环图片,javascript – HTML5在带有for循环的画布上绘制图片？

所以,我想用

HTML5创建一个Minecraft网站主题.我在HTML5 /

Javascript中有点摇摇欲坠(暂时没用过它),我需要一些帮助.我正在尝试计算一些可以放在屏幕上的16x16px瓷砖.然后,随机“生成地图”作为屏幕背景.然后,我使用相同的2 for循环生成地图,用填充图块填充屏幕(在生成过程中分配图片路径).问题是,画布完全是白色的.任何人都可以选择问题,并在可能的情况下给我任何提示吗？提前致谢！这是我的HTML5代码：

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;

}