0

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

我有一张地图，需要这样绘制：

在此处输入图像描述

背景有 2 层：海洋和岛屿。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();
},

我是瞎了还是怎么了？还是只是画错了顺序？

任何提示将不胜感激。谢谢，维克多·索托

4

1 回答 1

2

加载（创建）图像是一个异步操作。在您的代码中，您正在执行类似这样的操作（伪代码）：

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 -> dev tools -> settings）以避免缓存问题。

于 2013-06-19T15:05:17.437 回答