jquery getContext不是函数

lrl1mhuk 于 2022-12-22 发布在 jQuery

关注(0)|答案(8)|浏览(144)

我正在使用画布制作一个基本的Web应用程序，它可以在窗口大小调整时动态地改变画布的大小。我已经让它静态地工作，没有任何缺陷，但是当我创建一个对象使它动态地工作时，它抛出了一个错误
在chrome中，错误为：
未捕获的类型错误：对象[object Object]没有方法"getContext"
在火狐中是：
此. 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());
}

jquery

来源：https://stackoverflow.com/questions/5808162/getcontext-is-not-a-function

8条答案

按热度按时间

rjee0c151#

您的价值：

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

赞(0）回复(0）举报 2022-12-22

n8ghc7c12#

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

赞(0）回复(0）举报 2022-12-22

cetgtptt3#

或者，您可以用途：