Question

＆＃13;

function getRandomInt(min,max) { // random number from (inclusive,exclusive)
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max-min)) + min;
}

var boardLayout = [  // index of images for the canvas
  'redtile.png','bluetile.png','greentile.png','shoptile.png','healthtile.png','trainingtile.png'
  ];
  
imageObj.onload = function(x,y) { // onload function outside the loop
  context.drawImage(imageObj,x,y,x+100,y+100); // makes each image non-overlapping and 100x100
};
  
for (var x = 0; 900 > x; x += 100) { 
  for (var y = 0; 700 > y; y += 100) { // every 100x100 square should have another image on it
    var integer = getRandomInt(0,6);
    var tile = boardLayout[integer]; // gets a random image from boardLayout
    var canvas = document.getElementById('game');
    var context = canvas.getContext('2d');
    var imageObj = new Image();
    image.onload(x,y); // calling my function
    imageObj.src = tile; 
  }
}

＆＃13;

<!doctype html>
<html>
    <head>
        <title>Fiona</title>
    </head>
<body>
<canvas id='game' width="900px" height="700px" style="border:2px solid #000000;">
  </canvas>

<script type='text/javascript' src='try.js'></script>
</body>
</html>

＆＃13;

我对此很陌生，所以我在这里发帖时犹豫不决，但几个小时后我就放弃了。目标是创建一个随机分类的画布。 boardLayout＆＃34;它上面的图像。每个图像都是100x100，画布对于我的for循环来说足够大，所以它应该覆盖整个画布。

在过去的几个小时里，我尝试了无数种不同的方法，并插入了我认为最接近我做的事情。我的问题是我无法将一个函数（imageObj.onload）放入for循环中，我无法使用for-loop与函数分开或甚至在函数内部。

唯一可以提升我的html文档的是边框。我已经在画布上画了一张照片，一次只有一张照片。任何帮助表示赞赏！

javascript：创建使用随机分类图像制作的画布

0 个答案: