getContext 不是函数

Posted 2023-03-05

【中文标题】getContext 不是函数

【英文标题】：getContext is not a function

【发布时间】：2011-08-14 01:40:34

【问题描述】：

我正在使用画布制作一个基本的 Web 应用程序，该应用程序可以在窗口调整大小时动态更改画布大小。我已经让它静态工作而没有任何缺陷，但是当我创建一个对象以使其动态生成时，它会引发错误

在 chrome 中的错误是：

Uncaught TypeError: Object [object Object] has no method 'getContext'

在 Firefox 中是：

this.element.

我在网上搜索过，这似乎是一个常见问题，但提到的修复都没有任何区别。

有问题的代码如下：

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());

提前致谢。

【参考方案1】：

你的价值：

this.element = $(id);

是一个 jQuery 对象，而不是纯 Canvas 元素。

将其转回以便您可以调用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')
       .attr('width', this.width)       // for pixels
       .attr('height', this.height)
       .width(this.width)               // for CSS scaling
       .height(this.height)
       .appendTo(location);

    this.context = this.element.getContext("2d");

在http://jsfiddle.net/alnitak/zbaMh/ 上查看运行代码，最好使用 Chrome javascript 控制台，这样您就可以在调试输出中看到生成的对象。

【讨论】：

当我尝试放入该代码时，它会从我调用函数的行中给出错误“Uncaught TypeError: Cannot set property 'background' of undefined”：layer['background'] = new canvasLayer("body","background");

这表明你没有先做var layer = ;。我编辑了我的 jsfiddle 以更接近您的代码。

感谢您解决了我的问题！我一直认为使用 jQuery 选择器和使用 document.getElementById(); 是一样的。我想错了……

@Kaiido 公平点，但取决于您是否真的想真正改变画布中的像素数，或者只是改变它的视觉大小。

@Kaiido 无论哪种方式我都更新了代码以使用这两种方法。

【参考方案2】：

我遇到了同样的错误，因为我不小心使用了<div> 而不是<canvas> 作为我尝试调用getContext 的元素。

【讨论】：

好像每次使用这个插件都会犯这个错误。

节省时间，因为这不是 JQUERY 而是与香草 JS 相关的。

拯救了我的一天！即使这是很久以前 :-)

老兄，谢谢，这只是发生在我身上。

【参考方案3】：

您也可以使用：

this.element=$(id)[0];

【参考方案4】：

实际上，当我们在 javascript 中创建画布时也会出现此错误，如下所示。

document.createElement('canvas');

这里需要注意的是，我们必须正确地提供参数名称作为“画布”而不是其他任何东西。

谢谢

【参考方案5】：

我最近收到了这个错误，因为错字，我写的是“canvas”而不是“canvas”，希望这可以帮助正在搜索这个的人。

【参考方案6】：

这可能看起来很明显，但您可能认为一切都正确，例如：带有 id 的 canvas 元素，但在我的例子中，我也有一个具有相同 id 的 div 元素，这导致了我的错误。

【讨论】：

谢谢！这是我的问题。我做了<div id="the-canvas"/> 而不是<canvas id="the-canvas"/>。将其更改为画布元素即可解决问题。

【参考方案7】：

当您要求为其运行 getContext 函数的元素不是真正定义的画布或根本不是画布时，会发生此错误，因此您必须检查您的元素。