Javascript &引用；getContext不是一个函数；当为元素选择器使用变量时

我有：

但我得到：

未捕获类型错误：myCanvas.getContext不是函数

当页面加载时

当我尝试类似于：

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

---

对

myCanvas

的引用非常有效。给出了什么？

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

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

（它所做的是引用jQuery包装器对您隐藏的底层DOM节点）

---

---

您的“click”示例之所以有效，是因为

元素。click

（在您的示例中）实际上是jQuery库API的一部分：

myCanvas

在您的代码中是jQuery对象，而不是DOM元素

请使用以下代码

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

当然，那么

myCanvas。单击（…）

将不起作用，但您始终可以这样做

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

var myCanvas=$（“#myCanvas”）获取JQuery对象，您需要这样做

$(myCanvas).click(...)

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

myCanvas[0]是一个DOM对象

建议您这样表达jquery对象

$(myCanvas).click(...)

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

使用html5画布元素，而不是使用id创建元素。
例如，

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

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

这也可以通过以下方式实现：

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

myCanvas
在您的代码中是一个jQueery对象，而不是DOM元素……我同意，jQuery结果对象的
$
前缀应该是强制的。对于引用jQuery对象的变量，我总是使用
$
前缀，我有时仍然会在我发布到堆栈溢出的答案中这样做，因为有些人似乎期待它，特别是当有另一个变量引用DOM对象时，但我不再在自己的代码中这样做了。我想我没有对任何其他数据类型使用匈牙利符号也能过得很好，所以为什么要专门为jQuery对象破例呢？例如，我是中国人，我用英语与您交流，尽管这会让我花一些时间
var canvas = document.querySelector('canvas');
var context = canvas.getContext("2d");