JavaScript for canvas 中的 tick 方法

tick method in javascript for canvas

本文关键字：tick 方法 中的 canvas for JavaScript      更新时间：2023-09-26

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

当我尝试放置一个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";
};

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

我假设你在 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 函数。您在那里继续处理。

我希望这有所帮助。虽然你的问题可能完全不同;)

相关文章：