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

I have made simple example of using canvas and then I saw that my code doesn't work when I use jQuery selector.

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

Examples:

例子：

Javascript

使用Javascript

    window.onload = function() {
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        ctx.fillRect(10,50,100,200);
    };

JQuery

JQuery的

   window.onload = function() {
        var canvas = $('#myCanvas');
        var ctx = canvas.getContext('2d');

        ctx.fillRect(10,50,100,200);
    };

So I have no idea why it happened. Is there any limitations about it?

所以我不知道为什么会这样。对它有任何限制吗？

4 个解决方案

#1

Check this updated version of your jQuery fiddle: http://jsfiddle.net/techfoobar/46VKa/3/

检查你的jQuery小提琴的这个更新版本：http：//jsfiddle.net/techfoobar/46VKa/3/

The problem was:

问题是：

var canvas = $('#myCanvas') gets you a jQuery extended object and not a native DOM element object that has member functions like getContext etc. For this, you need to get the canvas element using var canvas = $('#myCanvas')[0]

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

NOTE: var canvas = document.getElementById('myCanvas'); is equivalent to var canvas = $('#myCanvas')[0]

注意：var canvas = document.getElementById（'myCanvas'）;相当于var canvas = $（'＃myCanvas'）[0]

#2

window.onload = function() {
     var canvas = $('#myCanvas');
     var ctx = canvas[0].getContext('2d'); // not canvas.getContext('2d')

     ctx.fillRect(10,50,100,200);
};

in your code you're using canvas.getContext('2d');, but it should be canvas[0].getContext('2d');.

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

Because getContext('2d') works on DOM element, where var canvas = $('#myCanvas'); return a jQuery object but node a DOM element.

因为getContext（'2d'）适用于DOM元素，其中var canvas = $（'＃myCanvas'）;返回一个jQuery对象，但节点是一个DOM元素。

And to retrieve a DOM element (here, canvas element) from jQuery object you need to use canvas[0].

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

---

In you JavaScript code you're using:

在您使用的JavaScript代码中：

document.getElementById('myCanvas'); which returns a DOM element. So,

的document.getElementById（ 'myCanvas'）;它返回一个DOM元素。所以，

var canvas = $('#myCanvas');

var canvas = $（'＃myCanvas'）;

canvas[0] and document.getElementById('myCanvas'); are same.

canvas [0]和document.getElementById（'myCanvas'）;是一样的。

---

You can also change the jQuery code like:

 window.onload = function() {
     var canvas = $('#myCanvas')[0]; // get the element here
     var ctx = canvas.getContext('2d');

     ctx.fillRect(10,50,100,200);
};

#3

This code...

这段代码......

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

Needs to be...

需要是...

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

#4

You can use get function of jquery to retrieve canvas element.

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

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