getContext 不是一个函数

Question

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

在 chrome 中抛出错误，错误是：

未捕获类型错误：对象 [object Object] 没有方法“getContext”

，在 Firefox 中它是：

this.element.getContext 不是一个函数

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

有问题的代码如下：

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

Answer 1

这是一个普通问题，所以要解决这个问题只需编写即可。

this.element = document.getElementById('whatever canvas id');
this.context = this.element.getContext("2d");

每次使用 this.context.drawImage() 时，我的意思是您正在使用的任何函数。
使用 this.context 而不是变量来使用它......因为它在我的中给出了错误。
因此，如果您使用纯 javascript、html 文件，请执行上述操作。

示例：

this.context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

或者：

this.context.drawImage(playerImage, frameX, frameY, spriteWidth, spriteHeight, 0, 0, spriteWidth, spriteHeight);

像这样，我希望这对您有帮助

Answer 2

您的值：

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 控制台这样您就可以在调试输出中看到生成的对象。

Answer 3

或者您可以使用：

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

Answer 4

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

document.createElement('canvas');

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

谢谢

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

该值将位于数组的第 0 个位置。
所以我们需要做 variable = $("#id") use variable[0]

Answer 9

我遇到了同样的错误，因为我不小心使用了

而不是 作为我尝试调用 getContext 的元素>。