javascript - "getContext is not a function"为元素选择器使用变量时

Question

我有:

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

和:

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

但我得到:

Uncaught TypeError: myCanvas.getContext is not a function

当页面加载时。

当我尝试这样的事情时:

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

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

Answer 1

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

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

([0] 的作用是引用 jQuery 包装器对您隐藏的底层 DOM 节点)。

---

您的“点击”示例有效，因为 element.click(在您的例子中)实际上是 jQuery 库 API 的一部分:https://api.jquery.com/click/