When I wrote a canvas applet today, I found that the two are different.
Directly use alert () to show what the two methods actually obtain. The Code is as follows:
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> jb51 </title>
<Link href = "css/index.css" rel = "stylesheet" type = "text/css">
<Script src = "js/jquery-1.4.2.min.js" type = "text/javascript"> </script>
</Head>
<Body>
<Div class = "warp">
<Canvas id = "jb51"> </canvas>
</Div>
<Script>
Var canvas_jb51 = $ ("# jb51 ");
Alert (canvas_jb51 );
Alert (document. getElementById ("jb51 "));
Var jb51_2d = canvas_jb51.getContext ("2d ");
Var jb51_img = new Image ();
Jb51_img.src = "images/Boston-III-48px.png ";
Jb51_2d.drawImage (jb51_img, 0, 0 );
</Script>
</Body>
</Html>
The alert () values are [object Object] and [object HTMLCanvasElement]. From this, it is not difficult to see that $ ("# jb51") is not as expected. Let's take a look at firebug debugging,
$ ("# Jb51") and document. getElementById ("jb51. The debugging result is as follows:
Copy codeThe Code is as follows:
$ ("# Jb51") [canvas # jb51]
Document. getElementById ("jb51") canvas # jb51
You may think of the results as well.
In fact, $ ("# jb51") [0] is equivalent to document. getElementById ("jb51 ")