Question

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

示例：

    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小提琴的这个更新版本：http://jsfiddle.net/techfoobar/46VKa/3/

问题是：

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

注意： 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]。< / p>

在您使用的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

此代码......

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

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

4 个答案:

您还可以更改：