为什么 canvas 不能与 jQuery 选择器一起使用？

Question

我做了一个使用canvas的简单示例，然后我发现当我使用jQuery选择器时，我的代码不起作用。

示例：

Javascript

    window.onload = function() {
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        ctx.fillRect(10,50,100,200);
    };

JQuery

   window.onload = function() {
        var canvas = $('#myCanvas');
        var ctx = canvas.getContext('2d');
        ctx.fillRect(10,50,100,200);
    };

所以我不知道为什么会发生这种事。它有什么局限性吗？

Answer 1

检查jQuery fiddle的更新版本：http://jsfiddle.net/techfoobar/46VKa/3/

问题是：

var canvas = $('#myCanvas')为您提供了一个jQuery扩展对象，而不是一个具有getContext等成员函数的本地DOM元素对象。为此，您需要使用var canvas = $('#myCanvas')[0] 获得画布元素

注意：var canvas = document.getElementById('myCanvas');等效于var canvas = $('#myCanvas')[0]

Answer 2

window.onload = function() {
     var canvas = $('#myCanvas');
     var ctx = canvas[0].getContext('2d'); // not canvas.getContext('2d')
            
     ctx.fillRect(10,50,100,200);
};

在您的代码中，您使用的是canvas.getContext('2d');，但它应该是canvas[0].getContext('2d');。

因为getContext('2d')在DOM元素上工作，其中var canvas = $('#myCanvas');返回jQuery object，但节点返回DOM元素。

要从jQuery对象中检索DOM元素（此处为画布元素），需要使用canvas[0]。

---

在您使用的JavaScript代码中：

返回DOM元素的CCD_ 11。所以，

var canvas = $('#myCanvas');

CCD_ 13和CCD_。

---

您还可以更改jQuery代码，如：

 window.onload = function() {
     var canvas = $('#myCanvas')[0]; // get the element here
     var ctx = canvas.getContext('2d');
            
     ctx.fillRect(10,50,100,200);
};

Answer 3

此代码。。。

var canvas = $('#myCanvas');
var ctx = canvas.getContext('2d');

需要成为…

var canvas = $('#myCanvas');
var ctx = canvas[0].getContext('2d');

Answer 4

您可以使用jquery的get函数来检索canvas元素。

var canvas = $('#myCanvas').get(0).getContext('2d');