如何使用Jquery将HTML5画布对象分配给变量?

时间:2012-08-21 20:35:08

标签: jquery html5 canvas

为什么在下面的代码中,只有显式的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')')

2 个答案:

答案 0 :(得分:2)

因为.get没有传递任何参数,所以返回类似数组的结构。你应该使用:

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

或简写:

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

获取DOM元素引用。

Fiddle

来自documentation

  

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

     

此调用返回所有匹配的DOM节点,包含在a中   标准阵列。

Testing

>>> var can = $("#can").get(); console.log(can instanceof Array);
true
>>> var can = $("#can").get(0); console.log(can instanceof Array);
false

答案 1 :(得分:0)

使用jQuery ID selector选择带有can ID的canvas元素。那会给你一个jQuery对象。每个jQuery对象都伪装成一个Array,因此您可以使用标准数组解除引用来获取底层DOM元素。 (见:http://api.jquery.com/get/

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

Try it out!