javascript-getContext不是函数

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

在Chrome中,错误为:

未捕获的TypeError:对象[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());
}

提前致谢。

devnill asked 2020-07-31T18:48:00Z
4个解决方案
64 votes

您的价值:

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')
       .width(this.width)
       .height(this.height)
       .appendTo(location);

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

理想情况下,请使用[Chrome Javascript控制台]查看[http://jsfiddle.net/alnitak/zbaMh/]上的运行代码,以便您可以在调试输出中看到生成的对象。

Alnitak answered 2020-07-31T19:01:08Z
31 votes

另外,您可以使用:

this.element=$(id)[0];
UpTheCreek answered 2020-07-31T19:01:28Z
26 votes

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

jbasko answered 2020-07-31T19:01:48Z
0 votes

我最近收到了这个错误,因为我写错了,我写的是“ canavas”而不是“ canvas”,希望这对正在搜索的人有所帮助。

ZHAO Xudong answered 2020-07-31T19:02:08Z
translate from https://stackoverflow.com:/questions/5808162/getcontext-is-not-a-function