Question

我创建了一个小型的javascript游戏，我在所有主流浏览器的本地计算机上进行了测试，效果很好。之后我将游戏上传到我的托管服务器上，游戏将不会显示在Chrome中，画布区域是灰色的，但它在firefox中工作正常，有谁知道为什么？这是演示的链接

http://djordjepetrovic.rs/igrica/

Answer 1

在catcher_game.js文件中，我至少发现了以下内容：

draw: function(){
    basket_catcherImg = new Image();
    basket_catcherImg.src = 'images/basket.png'; 
    ctx.drawImage(basket_catcherImg, this.x, this.y, this.w, this.h);
// ...

这不会很好。它可以在您的计算机上本地工作，因为图像是从磁盘缓存的。

加载图片是一种异步操作，因此您的drawImage需要等到图像加载 - 正确的方法是：

draw: function(){
    var me = this;
    basket_catcherImg = document.createElement('img');
    basket_catcherImg.onload = function() {
        ctx.drawImage(basket_catcherImg, me.x, me.y, me.w, me.h);
    }
    basket_catcherImg.src = 'images/basket.png'; 
    //...

您还需要与其他此类img实例一起执行此操作。

这里需要me的原因是因为在onload回调上调用时this更改为image元素。因此，您需要保留对原始this上下文的引用。

同时将new Image()替换为createElement('img')，因为当前an issue in Chrome无法正确处理此问题。

顺便说一句漂亮的图片！

Chrome画布渲染问题

1 个答案: