2

为什么在下面的代码中，只有显式的 Javascript 版本有效，而 Jquery 版本无效（已注释掉）？

 <html>
     <head>
         <title>Canvas Tutorial</title>
         <script type="text/javascript" src="./jquery-1.6.3.min.js"></script>
     </head>
     <body>
         <canvas id="can" width="150" height="150">Fallback</canvas>
         <script type="text/javascript">
             //var can = $("#can").get();
             var can = document.getElementById("can");
             var ctx = can.getContext('2d');
         </script>
     </body>
 </html>

我不断收到通知

TypeError: 'undefined' is not a function (evaluating 'can.getContext('2d')')
4

2 回答 2

2

因为.get不传递任何参数返回一个类似数组的结构。你应该使用：

var can = $("#can").get(0);

或简写：

var can = $("#can")[0];

获取 DOM 元素引用。

小提琴

从文档中：

如果没有参数， .get() 会返回所有元素。[...]

此调用返回所有匹配的 DOM 节点，包含在标准数组中。

测试：

>>> var can = $("#can").get(); console.log(can instanceof Array);
true
>>> var can = $("#can").get(0); console.log(can instanceof Array);
false
于 2012-08-21T20:39:15.210 回答
0

使用jQuery ID 选择器选择带有 ID 的画布元素can。这将为您提供一个 jQuery 对象。每个 jQuery 对象都伪装成一个数组，因此您可以使用标准数组解引用来获取底层 DOM 元素。（见：http ://api.jquery.com/get/ ）

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

试试看！

于 2012-08-21T20:41:38.723 回答