javascript HTMLCanvas 'getContext' 不是受支持的属性或方法

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9307159/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 06:14:24  来源:igfitidea点击:

HTMLCanvas 'getContext' is not a supported property or method

javascripthtmlexceptioncanvasinternet-explorer-9

提问by Firecow

I've just lauched a HTML5 game application, and I keep receiving 'object doesn't support property or method 'getContext' errors logs from some of my users.

我刚刚发布了一个 HTML5 游戏应用程序,我不断收到来自我的一些用户的“对象不支持属性或方法”getContext“错误日志。

My setup only allows users with Chrome (16<), Firefox (9<) or IE (9<) to play the game. IE (<9) users gets a chromeframe installation in their face.

我的设置只允许使用 Chrome (16<)、Firefox (9<) 或 IE (9<) 的用户玩游戏。IE (<9) 用户在他们的脸上安装了 chromeframe。

Its only some of my IE9 users that throw this exception. I've played the game on several windows machines with IE9, both vista and windows 7.

只有我的一些 IE9 用户抛出了这个异常。我在几台装有 IE9 的 windows 机器上玩过这个游戏,包括 vista 和 windows 7。

Searching my source, for the function call getContext, I get the same pattern. I create a canvas element using document.createElement, and then i call getContext('2d'), the next line.

搜索我的源代码,对于函数调用 getContext,我得到了相同的模式。我使用document.createElement 创建了一个canvas 元素,然后在下一行调用getContext('2d')。

var buffer = /** @type {!HTMLCanvasElement} */ (document.createElement('canvas')),
    ctx = /** @type {!CanvasRenderingContext2D} */ (buffer.getContext('2d')),
    draw = function(ctx) {
       /**
        * Alot of drawing calls.
        */
    };
draw(ctx);

Given that alot of my IE9 users run the game as it should, i don't think that this is a problem with my code, but rather some toolbar/plugin or setting in IE9 that is tripping me here.

鉴于我的很多 IE9 用户都按原样运行游戏,我不认为这是我的代码的问题,而是 IE9 中的一些工具栏/插件或设置让我在这里绊倒。

What do you guys think ?

你们有什么感想 ?

回答by Firecow

After inserting <meta http-equiv="X-UA-Compatible" content="chrome=1, IE=edge">we have reduced the bug count a lot, we still have a few, but that could be users logging in with weird browsers that the chromeframe install check doesn't catch.

插入后,<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=edge">我们已经减少了很多错误数量,我们仍然有一些,但这可能是用户使用 chromeframe 安装检查没有发现的奇怪浏览器登录。

chrome=1 means 'use chrome frame' if its there.

chrome=1 表示“使用 chrome 框架”(如果在那里)。

IE=edge means 'use highest possible version of IE'.

IE=edge 表示“使用尽可能高的 IE 版本”。

So i'll go with that for now.

所以我现在就这样做。

回答by thecodeHyman

as far as i know IE9 fully supports canvas tag. But user should make sure he is not in compatibility mode. But just to avoid the problem i suggest u using excanvas. If you dont know the how download excanvas and add following link

据我所知 IE9 完全支持画布标签。但是用户应该确保他没有处于兼容模式。但为了避免这个问题,我建议你使用 excanvas。如果您不知道如何下载 excanvas 并添加以下链接

<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->

回答by x10

Have you considered the possibility that users don't know which version of IE they are using and are reporting it incorrectly?

您是否考虑过用户不知道他们使用的是哪个版本的 IE 并错误报告的可能性?

回答by kirill.buga

From Instructions

说明

Dynamically created elements If you have created your canvas element dynamically it will not have the getContext method added to the element. To get it working you need to call initElement on the G_vmlCanvasManager object.

动态创建的元素 如果您动态创建了画布元素,则不会将 getContext 方法添加到元素中。为了让它工作,你需要在 G_vmlCanvasManager 对象上调用 initElement。

var el = document.createElement('canvas');
G_vmlCanvasManager.initElement(el);
var ctx = el.getContext('2d');