2013-10-11 7 views
6

は現在、私は、HTML5のキャンバスで遊びだし、簡単なコードは以下の通りです:jqueryでキャンバス要素を取得するには?

<!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

jQueryオブジェクトをDOM要素に変換するには、インデックス '[0]'を使用する必要があります。var cv = $( '#cv')[0] ' – devnull69

+0

@ devnull69はい、うまくいきます、ありがとうございます! – Erxin

答えて

13

jQueryの$(<selector>)戻って非常に便利です0xの代わりにを使用する

5

あなたは、実際のDOM要素を取得するには、次の.get()を使用する必要があります。

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

をそうでない場合、あなたはjQueryオブジェクトを取得しているだけ$("#cv")を行う際には、そのようなgetContextなどのメソッドが動作しませんので。 jqueryのドキュメントを探るのget()

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

を使用して

4

は、それが(実際にはas the doc says "オブジェクトが配列を装っ" である)ノードのコレクション

+0

私はjqueryのプロパティをチェックして、jqueryが忘れてしまった要素のセットを忘れてしまった。 – Erxin

関連する問題