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

我已经做了使用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元素对象。为此，您需要使用var canvas = $('#myCanvas')[0]获取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); }; 

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