google-chrome - Chrome 画布渲染问题

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这里的原因是因为this在 onload 回调上调用时更改为图像元素。因此，您需要保留对原始this上下文的引用。

也替换new Image()为createElement('img')，因为Chrome中当前存在无法正确处理此问题的问题。

顺便说一句，漂亮的图形！