javascript - 为什么画布不适用于 jQuery 选择器？

Question

我做了一个简单的使用画布的例子，然后我发现我的代码在我使用 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 元素），您需要使用canvas[0].

---

在您使用的 JavaScript 代码中：

document.getElementById('myCanvas');它返回一个 DOM 元素。所以，

var canvas = $('#myCanvas');

canvas[0]并且document.getElementById('myCanvas');是相同的。

---

您还可以更改 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

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

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

Answer 4

这段代码...

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

需要是...

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