javascript - Canvas 绘制不正确(不稳定)

Question

我正在构建一个 HTML5/javascript“简单”游戏，但我的 Canvas 绘图遇到了一个不寻常的问题。不稳定。

我有一张 map ，需要这样绘制:

背景有两层:海洋和岛屿。UI 有 6 个或更多按钮/图像。

有时它会画成这样:

有时甚至不绘制 UI:

但是在几次错误的绘制(F5)之后，它开始正确绘制所有内容。所以，它非常不稳定，我不明白为什么。这是我的这些绘图的代码:

// Background Layers
    Game.m_gameUI.drawBG();

    // Draw User Interface
    Game.m_gameUI.drawUI();     

    // Draw Score
    Game.m_gameUI.drawScore();

drawBG : function () {  

    // Layer 1
    var img1 = new Image();

    img1.id = 'map2_bg';
    img1.src = GameUI.BKGIMG3_SRC;

    GameUI.m_canvasDraw.drawImage( img1, 0,0, GameUI.actualCanvasWidth, GameUI.actualCanvasHeight );

    // Layer 2
    var img2 = new Image();

    img2.id = 'map_bg';
    img2.src = GameUI.GAME_MAP_SRC;

    GameUI.m_canvasDraw.drawImage( img2, 0,0, GameUI.actualCanvasWidth, GameUI.actualCanvasHeight );
},


drawUI : function () {  

    GameUI.m_canvasDraw.globalAlpha = 1;

    // BagPack
    GameUI.drawUiImage( 'mochila' , GameUI.actualCanvasWidth - 59, 110 , 59, 66 );

    // Home
    GameUI.drawUiImage( 'home' , GameUI.actualCanvasWidth - 102, 0 , 102, 58 );
    //GameUI.setUiEvent( 'home' );

    // Points
    GameUI.drawUiImage( 'bandeira' , 0, 0 , 164, 34 );

    // Help
    GameUI.drawUiImage( 'ajuda' , 0, GameUI.actualCanvasHeight - 71 , 84, 71 );

    // Email
    GameUI.drawUiImage( 'email' , GameUI.actualCanvasWidth - 102 - 96, 0 , 131, 58 );

    // Volume
    GameUI.drawUiImage( 'volume' , GameUI.actualCanvasWidth - 66, GameUI.actualCanvasHeight - 71 , 66, 71 );
},

drawUiImage : function ( image, x, y, width, height ) {

    GameUI.m_canvasDraw.restore();

    var img = new Image();

    var filename_off = image + '_off.png';
    var filename_on = image + '_on.png';

    img.id = image;

    // Assuming you instantiated the image url on class atributes
    img.src = GameUI.ui_img_folder + filename_off;

    // Add the variable into class
    GameUI[image] = image;

    // Draw it
    GameUI.m_canvasDraw.drawImage( img, x, y, width, height );  
    GameUI.m_canvasDraw.restore();
},

我是瞎了还是怎么的？或者只是按错误的顺序绘图？

任何小费都将不胜感激。谢谢，维克多·索托

Answer 1

加载(创建)图像是一个异步操作。在您的代码中，您正在执行类似的操作(伪代码):

var img = new Image();
img.src = "http://example.com/myImage.png";
canvas.drawImage(img, ...);

如果您有快速连接(本地 LAN，...)或图像已缓存，那么“img.src=...”之后的图像可能已准备好用于绘图。

按几次 F5 后，我猜您的图像已在缓存中，因此它可以正常工作。

要解决您的问题，您必须等待加载事件。

var img = new Image();
img.onload = function() { /* insert draw code here */ }
img.src = "http://example.com/myImage.png";

对于游戏开发，我建议构建或使用一个资源库，用于处理图像资源的加载/缓存。

顺便说一句，在开发过程中关闭浏览器缓存(例如:chrome -> 开发工具 -> 设置)以避免缓存问题。