在今天寫一個canvas的小程序時,才發現這兩者是不一樣的。
直接用alert()來顯示這兩個方法倒底獲得的是什麼。代碼如下:
代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>poluoluo</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="poluoluo"></canvas>
</div>
<script>
var canvas_poluoluo=$("#poluoluo");
alert(canvas_poluoluo);
alert(document.getElementById("poluoluo"));
var poluoluo_2d=canvas_poluoluo.getContext("2d");
var poluoluo_img=new Image();
poluoluo_img.src="images/Boston-III-48px.png";
poluoluo_2d.drawImage(poluoluo_img,0,0);
</script>
</body>
</html>
兩個alert()分別顯示為:[object Object]和[object HTMLCanvasElement]。從這裡,不難看出,$("#poluoluo")並沒有像我預想的那樣。再用firebug調試看一下,
$("#poluoluo")和document.getElementById("poluoluo")倒底是什麼內容。調試結果如下:
代碼如下:
$("#poluoluo") [canvas#poluoluo]
document.getElementById("poluoluo") canvas#poluoluo
想必,看到這裡,不用我說,大家也會想到結果了。
實際上,$("#poluoluo")[0]等同於 document.getElementById("poluoluo")