Javascript getContext 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5808162/
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
getContext is not a function
提问by devnill
I'm working on making a basic web application using canvas that dynamically changes the canvas size when the window resizes. I've gotten it to work statically without any flaws but when I create an object to make it dynamically it throws an error
我正在使用画布制作一个基本的 Web 应用程序，当窗口调整大小时，它会动态更改画布大小。我已经让它在没有任何缺陷的情况下静态工作，但是当我创建一个对象以使其动态化时，它会引发错误
in chrome the error is:
在 chrome 中，错误是：
Uncaught TypeError: Object [object Object] has no method 'getContext'
未捕获的类型错误：对象 [object Object] 没有方法“getContext”
and in firefox it is:
在 Firefox 中它是：
this.element.getContext is not a function
this.element.getContext 不是函数
I've searched the web and it seems like a common problem but none of the fixes mentioned make any difference.
我在网上搜索过，这似乎是一个常见问题，但提到的修复程序都没有任何区别。
The code is in question is as follows:
有问题的代码如下：
layer['background'] = new canvasLayer("body","background");
function canvasLayer(location,id){
$(location).append("<canvas id='"+id+"'>unsupported browser</canvas>");
this.element=$(id);
this.context = this.element.getContext("2d"); //this is the line that throws the error
this.width=$(window).width(); //change the canvas size
this.height=$(window).height();
$(id).width($(window).width()); //change the canvas tag size to maintain proper scale
$(id).height($(window).height());
}
Thanks in advance.
提前致谢。
回答by Alnitak
Your value:
您的价值：
this.element = $(id);
is a jQuery object, not a pure Canvas element.
是一个 jQuery 对象，而不是一个纯 Canvas 元素。
To turn it back so you can call getContext(), call this.element.get(0), or better yet store the real element and not the jQuery object:
把它转回来，这样你就可以调用getContext()，调用this.element.get(0)，或者更好地存储真正的元素而不是 jQuery 对象：
function canvasLayer(location, id) {
this.width = $(window).width();
this.height = $(window).height();
this.element = document.createElement('canvas');
$(this.element)
.attr('id', id)
.text('unsupported browser')
.width(this.width)
.height(this.height)
.appendTo(location);
this.context = this.element.getContext("2d");
}
See running code at http://jsfiddle.net/alnitak/zbaMh/, ideally using the Chrome Javascript Console so you can see the resulting object in the debug output.
请参阅http://jsfiddle.net/alnitak/zbaMh/ 上的运行代码，最好使用 Chrome Javascript 控制台，以便您可以在调试输出中看到生成的对象。
回答by UpTheCreek
Alternatively you can use:
或者，您可以使用：
this.element=$(id)[0];
回答by jbasko
I got the same error because I had accidentally used <div>instead of <canvas>as the element on which I attempt to call getContext.
我遇到了同样的错误，因为我不小心使用了<div>而不是<canvas>作为我尝试调用的元素getContext。
回答by ZHAO Xudong
I recently got this error because the typo, I write 'canavas' instead of 'canvas', hope this could help someone who is searching for this.
我最近收到此错误，因为打字错误，我写的是“canvas”而不是“canvas”，希望这可以帮助正在搜索此内容的人。
