javascript中用于画布的tick方法

Question

我正在尝试为此代码创建一个刻度方法。

当我尝试放置一个 while 循环或时间间隔时，它会变成空白。

我希望 tick 方法在画布不显示空白的情况下调用此函数。 我将如何制作该刻度方法

function setup(){
    var canvas = document.getElementById('my_canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = 800;
    canvas.height = 600;
	var gun = new Image();
	var badguy = new Image();
    var wall1 = 200;
    var ground = new Image();
    var back = new Image();
	var back2 = new Image();
	var back3 = new Image();
    var wall = new Image();
    var wall2 = new Image();
back.onload = function() {
    ctx.drawImage(back, 0, 0, 800, 300);
};
back2.onload = function() {
    ctx.drawImage(back2, mountainplace, 0, mtnsize1, 300);
};
back3.onload = function() {
    ctx.drawImage(back3, mountainplace2, 0, mtnsize2, 300);
};
ground.onload = function() {
    ctx.drawImage(ground, groundplace, 300, 1980, 200);
};
wall.onload = function() {
    ctx.drawImage(wall, place2, 250, size2, 100);
};
wall2.onload = function() {
    ctx.drawImage(wall2, place, 250, size, 100);
};
 badguy.onload = function() {
    ctx.drawImage(badguy, badguyplace, 250, 100, 100);
};
gun.onload = function() {
    ctx.drawImage(gun, 0, 100, 400, 400);
};
back2.src = "moutain1.png";
back3.src = "moutain2.png";
back.src = "backing.png";
ground.src = "ground1.jpg";
wall.src = "wall.png";
wall2.src = "wall2.png";
badguy.src = "santa2.png";
gun.src = "gun1.png";
};

Answer 1

你需要澄清这个问题，因为我不确定你到底想要达到什么目的。

我假设您在 setup() 函数的末尾放置了一些代码，用于对图像执行一些操作。但在您执行此操作之前，您需要等待图像加载。

顺便说一句：您的代码的另一个问题是图像将按照加载顺序在画布上绘制，这可能是不可预测的。您可能也想避免这种情况。

解决您的问题（或至少解决我认为您的问题的方法）是首先开始加载图像，然后在它们全部之后才执行进一步的操作> 已加载。

您可以使用以下代码来执行此操作：

function makeAllLoadedHandler(image_files_count, on_all_loaded) {
  return function() {
    --image_files_count;
    if (image_files_count == 0) {
      // All images loaded, call the function.
      on_all_loaded();
    }
  }
}

function loadAllImages(image_files, on_all_loaded) {
  var images = {};
  var callback = makeAllLoadedHandler(image_files.length, function() { on_all_loaded(images); } );
  for (var i = 0; i < image_files.length; ++i) {
    var image = new Image;
    image.src = image_files[i];
    image.onload = callback;
    images[image_files[i]] = image;
  }
}

loadAllImages() 函数接受一个图像文件名数组和一个在所有图像加载完成后调用的函数。

你可以在你的代码中这样使用它：

function setup() {
  var image_files = [
    "mountain1.png",
    "mountain2.png",
    "backing.png",
    "ground1.jpg",
    "wall.png",
    "wall2.png",
    "santa2.png",
    "gun1.png" ];

  loadAllImages(image_files, onAllImagesLoaded);
}

function onAllImagesLoaded(images) {
  // Draw your images and perform all the other tasks on them.
  // The 'images' object stores each of the Image object under a key that is
  // its file name.
  ctx.drawImage(images['backing.png'], 0, 0, 800, 300);

  // ...
  // Do other stuff with the images.
}

您只需像以前一样调用setup() 函数，然后稍后当所有图像都可用时调用onAllImagesLoaded 函数。你继续在那里处理。

我希望这会有所帮助。尽管您的问题可能完全不同;)