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

问题是:

var canvas = $('#myCanvas') 获取jQuery扩展对象,而不是具有getContext等成员函数的本机DOM元素对象.为此,您需要使用canvas元素 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);
};