Question

我有：

<div id="canvasContainer">
    <canvas id="myCanvas" height="450" width="650"></canvas>
</div>

和

var myCanvas = $("#myCanvas");
var myCanvasContext = myCanvas.getContext("2d");

但我得到了：

未捕获的TypeError：myCanvas.getContext不是函数

加载页面时。

当我尝试类似的事情时：

myCanvas.click (function() {
    console.log("You clicked the canvas");
});

对myCanvas的引用完美无缺。是什么给了什么？

Answer 1

getContext不是jQuery库的一部分，它是WebAPI的一部分。您必须引用原始DOM Node对象而不是jQuery包装器：

var myCanvasContext = myCanvas[0].getContext("2d");

（[0]所做的是它引用了jQuery包装器隐藏的底层DOM节点。）

您的“点击”示例有效，因为element.click（在您的情况下）实际上是jQuery库API的一部分：https://api.jquery.com/click/

Answer 2

代码中的

myCanvas是一个jQuery对象，而不是一个DOM元素......

使用以下代码

var myCanvas = document.getElementById("myCanvas");
var myCanvasContext = myCanvas.getContext("2d");

当然，然后myCanvas.click(...)不会工作，但你总能做到

$(myCanvas).click(...)

Answer 3

var myCanvas = $("#myCanvas");获取一个JQuery对象，你需要这样做

var myCanvasContext = myCanvas[0].getContext("2d");

myCanvas [0]是一个DOM对象，

建议你像这样表达jquery对象

var $myCanvas = $("#myCanvas")

Answer 4

使用html5 canvas元素而不是使用id创建元素。例如。 <canvas></canvas>

var canvas  = document.getElementById("canvas");
            context     = canvas.getContext('2d');

            base_image = new Image();
            base_image.src = imageUrl;
            base_image.onload = function(){
                context.drawImage(base_image, 0, 0);
            }

Answer 5

有同样的错误，因为我使用的是模态，dom 还没有准备好获取我的画布！所以我这样做了：

$(document).ready(
    function(){
        var canvas = document.getElementById('myCanvasID');
        var context = canvas.getContext('2d');
        // ... });

Answer 6

也可以这样做：

var canvas = document.querySelector('canvas');
var context = canvas.getContext("2d");

使用变量作为元素选择器时，“getContext不是函数”

6 个答案: