用JavaScript加载并绘制平铺图像到画布

Question

It seems clear to me how to dynamically load and draw an image with JavaScript. I attach an onload function and set the image source:

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "your_img_path";

I want to do this for a 2D array of images (tiles) and update those tiles many times. However, as described later, I run into issues with implementing this.

The function that I've written, and which I show below, contains some computations that are not relevant to my current problem. Their purpose is to allow for the tiles to be panned/zoomed (simulating a camera). The tile chosen to be loaded depends on the location requested to render.

setInterval(redraw, 35);

function redraw()
{
    var canvas = document.getElementById("MyCanvas");
    var ctx = canvas.getContext("2d");

    //Make canvas full screen.
    canvas.width  = window.innerWidth;
    canvas.height = window.innerHeight;

    ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);

    //Compute the range of in-game coordinates.
    var lowestX = currentX - (window.innerWidth / 2) / zoom;
    var highestX = currentX + (window.innerWidth / 2) / zoom;
    var lowestY = currentY - (window.innerHeight / 2) / zoom;
    var highestY = currentY + (window.innerHeight / 2) / zoom;

    //Compute the amount of tiles that can be displayed in each direction.
    var imagesX = Math.ceil((highestX - lowestX) / imageSize);
    var imagesY = Math.ceil((highestY - lowestY) / imageSize);

    //Compute viewport offsets for the grid of tiles.
    var offsetX = -(mod(currentX, imageSize) * mapZoom);
    var offsetY = -(mod(currentY, imageSize) * mapZoom);

    //Create array to store 2D grid of tiles and iterate through.
    var imgArray = new Array(imagesY * imagesX);
    for (var yIndex = 0; yIndex < imagesY; yIndex++) {
        for (var xIndex = 0; xIndex < imagesX; xIndex++) {
            //Determine name of image to load.
            var iLocX = (lowestX + (offsetX / mapZoom) + (xIndex * imageSize));
            var iLocY = (lowestY + (offsetY / mapZoom) + (yIndex * imageSize));
            var iNameX = Math.floor(iLocX / imageSize);
            var iNameY = Math.floor(iLocY / imageSize);

            //Construct image name.
            var imageName = "Game/Tiles_" + iNameX + "x" + iNameY + ".png";

            //Determine the viewport coordinates of the images.
            var viewX = offsetX + (xIndex * imageSize * zoom);
            var viewY = offsetY + (yIndex * imageSize * zoom);

            //Create Image
            imgArray[yIndex * imagesX + xIndex] = new Image();
            imgArray[yIndex * imagesX + xIndex].onload = function() {
                ctx.drawImage(imgArray[yIndex * imagesX + xIndex], viewX, viewY, imageSize * zoom, imageSize * zoom);
            };
            imgArray[yIndex * imagesX + xIndex].src = imageName;
        }   
    }    
}

As you can see, there is an array declared in the function to equal the size of the displayed grid of tiles. The elements of the array are ostensibly filled with images that are drawn once dynamically loaded. Unfortunately, imgArray[yIndex * imagesX + xIndex] is not considered an image by my browser, and I receive the error:

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

Also, I had originally thought the array wasn't necessary. After all, why should I need to keep a handle to the image after I've finished drawing it if I'm just going to load a new one next time redraw is called? In this scenario, the loop looked like this:

for (var yIndex = 0; yIndex < imagesY; yIndex++) {
    for (var xIndex = 0; xIndex < imagesX; xIndex++) {
        //Determine name of image to load.
        var iLocX = (lowestX + (offsetX / mapZoom) + (xIndex * imageSize));
        var iLocY = (lowestY + (offsetY / mapZoom) + (yIndex * imageSize));
        var iNameX = Math.floor(iLocX / imageSize);
        var iNameY = Math.floor(iLocY / imageSize);

        //Construct image name.
        var imageName = "Game/Tiles_" + iNameX + "x" + iNameY + ".png";

        //Determine the viewport coordinates of the images.
        var viewX = offsetX + (xIndex * imageSize * zoom);
        var viewY = offsetY + (yIndex * imageSize * zoom);

        //Create Image
        var img = new Image();
        img.onload = function() {
            ctx.drawImage(img, viewX, viewY, imageSize * zoom, imageSize * zoom);
        };
        img.src = imageName;
    }   
}

I had better luck with this method since the last processed tile was rendered. Despite this, all other tiles were not drawn. I guess I might have been overwriting things so that only the last kept its values.

1. So, what can I do so that I can render a 2D grid of tiles repeatedly such that the tiles are loaded all the time?

2. And why is the array element not considered an image?

Answer 1

You've made the classic mistake that all JavaScript programmers make at one time or another. The problem is here:

imgArray[yIndex * imagesX + xIndex].onload = function() {
    ctx.drawImage(imgArray[yIndex * imagesX + xIndex], viewX, viewY, imageSize * zoom, imageSize * zoom);
};

You're defining a function in a loop and expecting each function to have its own copies of the variables. That's not what happens. Every function you define uses the same variables yIndex , xIndex , viewX , and viewY . Note that the functions use those variables, not the values of those variables.

This is very important: the functions you define in the loop do not use the value of yIndex (and xIndex , viewX , viewY ) at the time you defined the function. The functions use the variables themselves. Each function evaluates yIndex (and xIndex and the rest) at the time that the function is executed.

We say that these variables have been bound in a closure . When the loop ends, yIndex and xIndex are out of range, so the functions calculate a position beyond the end of the array.

The solution is to write another function to which you pass yIndex , xIndex , viewX , and viewY , and which makes a new function that captures the values that you want to use. These values will be stored in new variables that are separate from the variables in the loop.

You can put this function definition inside redraw() , before the loop:

function makeImageFunction(yIndex, xIndex, viewX, viewY) {
    return function () {
        ctx.drawImage(imgArray[yIndex * imagesX + xIndex], viewX, viewY, imageSize * zoom, imageSize * zoom);
    };
}

Now replace the problematic lines with a call to the function-making function:

imgArray[yIndex * imagesX + xIndex].onload = makeImageFunction(yIndex, xIndex, viewX, viewY);

Also, make sure that you're setting the source of the correct image:

imgArray[yIndex * imagesX + xIndex].src = imageName;

To make your code easier to read and easier to maintain, factor out the repeated calculation of yIndex * imagesX + xIndex . It would be better to calculate the image index once and use it everywhere.

You can simplify makeImageFunction like so:

function makeImageFunction(index, viewX, viewY) {
    return function () {
        ctx.drawImage(imgArray[index], viewX, viewY, imageSize * zoom, imageSize * zoom);
    };
}

Then write this inside the loop:

// Create image.
var index = yIndex * imagesX + xIndex;
imgArray[index] = new Image();
imgArray[index].onload = makeImageFunction(index, viewX, viewY);
imgArray[index].src = imageName;

You may wish to factor out imgArray[index] as well:

// Create image.
var index = yIndex * imagesX + xIndex;
var image = imgArray[index] = new Image();
image.onload = makeImageFunction(index, viewX, viewY);
image.src = imageName;

At this point we ask ourselves why we have an image array at all. If, as you say in your question, you have no use for the array once you've loaded the image, we can get rid of it altogether.

Now the argument that we pass to makeImageFunction is the image:

function makeImageFunction(image, viewX, viewY) {
    return function () {
        ctx.drawImage(image, viewX, viewY, imageSize * zoom, imageSize * zoom);
    };
}

And inside the loop we have:

// Create image.
var image = new Image();
image.onload = makeImageFunction(image, viewX, viewY);
image.src = imageName;

This looks similar to the alternative scenario you mention in your question, except that it does not have the function definition inside the loop. Instead it calls a function-making function which captures the current values of image , viewX , and viewY in a new function.

Now you can work out why your original code only drew the last image. Your loop defined a whole bunch of functions that all referred to the variable image . When the loop was over, the value of image was the last image you made, so all of the functions referred to the last image. Thus, they all drew the same image. And they drew it in the same location, because all of them were using the same variables viewX and viewY .

Answer 2

Michael Laszlo has provided a great answer but I would like to add to it in this situation because this is in regards to a graphics application which has special considerations.

When updating the content of the canvas you should keep it all in one function. that function should be called when all the other page layout and rendering has been completed. This function should not be called more than 60 times a second. Accessing the canvas in an ad hock fashion is messy and will slow the whole page down.

Browsers provide a method for ensuring the timing of the canvas redraw is in sync with its own layout and rendering. window.requestAnimationFrame (renderFunction); see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

There is no need to add the onload event to each image, it is a waste of resources. You simply add the image to an array then on each animation frame you check if the image in the array has been loaded by inspecting the complete property of each image.

I am assuming that the tiles are part of a background so only needs to be rendered once. It is best to create a off page canvas object and render the tiles to it, then render that canvas to the on page canvas the user sees.

... // all in scope of your game object
// create a background canvas and get the 2d context
function setup(){
    // populate your imageArray with the image tiles

    // Now call requestAmimationFrame
    window.requestAnimationFrame(myRenderTileSetup);
}
function myRenderTileSetup(){ // this renders the tiles as they are avalible
    var renderedCount = 0;
    for(y = 0; y < tilesHeight; y+=1 ){
        for(x = 0; x < tilesWidth; x+=1 ){
            arrayIndex = x+y*tilesWidth;
            // check if the image is available and loaded.
            if(imageArray[arrayIndex] && imageArray[arrayIndex].complete){
                 backGroundCTX.drawImage(imageArray[arrayIndex],... // draw the image
                 imageArray[arrayIndex] = undefined; // we dont need the image
                                                     // so unreference it
            }else{  // the image is not there so must have been rendered
                 renderedCount += 1;  // count rendered tiles.
            }
        }
     }
     // when all tiles have been loaded and rendered switch to the game render function
     if(renderedCount === tilesWidth*tilesHeight){
          // background completely rendered
          // switch rendering to the main game render.
          window.requestAnimationFrame(myRenderMain);
     }else{
          // if not all available keep doing this till all tiles complete/ 
          window.requestAnimationFrame(myRenderTileSetup);
     }
}

function myRenderMain(){
    ... // render the background tiles canvas

    ... // render game graphics.

    // now ready for next frame.
    window.requestAnimationFrame(myRenderMain);
}

This is just an example showing the rendering of tiles and how I might imagine your game to function and not intended as functional code. This method simplifies the rendering process and only does it when required. It also keeps the GPU (Graphics Processing Unit) state changes to a minimum by not calling the draw function on an add hock (Image.onload) way.

It also does away with the need to add onload function to each tiled image, which its self is an extra overhead. If as Michael Laszlo suggested you add a new function for each image you can run the risk of a memory leak if you do not delete the image reference or the function referenced by the onload property. It is always best to minimize all interaction with the DOM and DOM objects such as HTMLImageElement and if not needed always ensure you dereferance them so they dont hang around wasting memory.

requestAnimationFrame also stops being called if the browser window is not visible allowing other processes on the device more CPU time and thus being more user friendly.

Writing games requires a careful eye on performance and every little bit helps.