Question

我试图为此代码制作一个tick方法。

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

我希望tick方法调用此函数，而画布不会显示为空白。我如何制作滴答方法

＆＃13;

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";
};

＆＃13;

Answer 1

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

我假设你在setup（）函数的末尾放了一些代码，对图像执行一些操作。但在你可以做之前，你需要等待图像加载。

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

问题的解决方案（或者至少是我认为你的问题是什么）是首先开始加载图像，然后只有在全部已经装好了。

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

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

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

用于画布的javascript中的tick方法

1 个答案: