javascript - 在 Canvas 上随机绘制图像 x 和 y

Question

伙计们，我想在 Canvas 上绘制 4 个图像，但每个图像都是随机的 x 和 y ..这是我的代码

var imgs = [];
var fruits = ["fruit1.png", "fruit2.png", "fruit3.png", "fruit4.png"];

var monsterReady1 = false;
for (var i = 0; i < fruits.length; i++) {
    imgs[i] = new Image();
    imgs[i].onload = function() {
        monsterReady1 = true;
    };
    imgs[i].src = fruits[i];
}

var monsterXY1 = function() {
    monster1.x = (Math.random() * (canvas.width - 100));
    monster1.y = (Math.random() * (canvas.height - 100));
};

var draw = function() {
    if (monsterReady1) {
        for (var i = 0; i < fruits.length; i++) {
            ctx.drawImage(imgs[i], monster1.x, monster1.y);
        }
    }
}

var main = function() {
    draw();
    requestAnimationFrame(main);
};
monsterXY1();

但是这段代码为我提供了相同 x 和 y 的所有图像，那么我如何随机生成每个图像的 x 和 y ??

Answer 1

在尝试绘制图像之前，使用图像预加载器确保所有图像均已加载:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var imageURLs=[];  
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png");

// the loaded images will be placed in imgs[]
var imgs=[];

var imagesOK=0;
loadAllImages(start);

function loadAllImages(callback){
  for (var i=0; i<imageURLs.length; i++) {
    var img = new Image();
    imgs.push(img);
    img.onload = function(){ 
      imagesOK++; 
      if (imagesOK>=imageURLs.length ) {
        callback();
      }
    };
    img.onerror=function(){alert("image load failed");} 
    img.crossOrigin="anonymous";
    img.src = imageURLs[i];
  }      
}

function start(){

  // the imgs[] array now holds fully loaded images
  // the imgs[] are in the same order as imageURLs[]
  for(var i=0;i<imgs.length;i++){
    var randomX=Math.min(cw-imgs[i].width,Math.random()*cw);
    var randomY=Math.min(ch-imgs[i].height,Math.random()*ch);
    ctx.drawImage(imgs[i],randomX,randomY);
  }

}

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>