为什么在下面的代码中,只有显式的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')')
答案 0 :(得分:2)
因为.get
没有传递任何参数,所以返回类似数组的结构。你应该使用:
var can = $("#can").get(0);
或简写:
var can = $("#can")[0];
获取DOM元素引用。
如果没有参数,.get()将返回所有元素。 [...]
此调用返回所有匹配的DOM节点,包含在a中 标准阵列。
>>> 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');