2013-10-11 132 views
6

目前我与HTML5的Canvas游戏,简单的代码如下:如何通过jquery获取canvas元素?

<!DOCTYPE HTML> 
<html> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-2.0.3.min.js"></script> 
    <script> 
     $(function() { 
      //THIS WILL NOT WORK! 
      //var cv = $("#cv"); 

      //THIS WORKS FINE. 
      var cv = document.getElementById("cv"); 

      ct = cv.getContext("2d"); 
      var mText = "hi"; 
      var x = cv.width/2; 
      var y = cv.height/2; 
      ct.textAligh = "center"; 
      ct.fillText(mText, x, y); 
     }); 
    </script> 
</head> 
<body> 
<div style="width:200px; height:200px; margin:0 auto; padding:5px;"> 
    <canvas id="cv" width="200" height="200" style="border:2px solid black"> 
    Your browser doesn't support html5! Please download a fitable browser. 
    </canvas> 
</div> 
</body> 
</html> 

canvas元素只能通过该方法的document.getElementById采摘,但jQuery的方法是行不通的。有没有办法从jquery对象中获取原始html,或者我错过了使用某些东西? 在此先感谢!

+2

您必须使用索引'[0]'将jQuery对象转换为DOM元素var cv = $('#cv')[0]' – devnull69

+0

@ devnull69是的,它的工作原理,谢谢! – Erxin

回答

13

jQuery的$(<selector>)返回节点的集合(其实是 “对象伪装成一个阵列” as the doc says)所以只需使用$('#cv').get(0)而不是document.getElementById("cv")

5

您需要使用.get()下获得实际的DOM元素:

var canvas = $("#cv").get(0); 

否则,你得到的jQuery对象时,你只能做$("#cv"),所以如getContext方法将无法正常工作。

4

使用get()

http://api.jquery.com/get/

探索jQuery的文档,这是非常有用的

+0

我只检查了jquery的属性,并忘记了jquery返回一组创建的元素。 – Erxin

相关问题