Question

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

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

enter image description here

背景有2层：海洋和岛屿。用户界面有6个或更多按钮/图像。

有时会这样画：

enter image description here

有时甚至不会绘制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();
},

我是盲人还是什么？或者只是画错了订单？

任何提示都会被贬低。谢谢， Victor Souto

Answer 1

加载（创建）图像是一种异步操作。在你的代码中，你正在做这样的事情（伪代码）：

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

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

多次按F5后，我猜你的图像在缓存中，因此接缝工作。

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

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

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

顺便说一下，在开发过程中关闭浏览器缓存（例如：chrome - ＆gt;开发工具 - >设置）以避免缓存问题。

画布绘制不正确（不稳定）

1 个答案: