在 W3C 的範例,img物件是抓頁面中已存在的圖檔,如果我們不想為了canvas而多建立一個<img>物件,其實可以直接用下列語法載入圖檔...
<script>
window.onload = function() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var img = new Image();
img.src = "car.png";
img.onload = function() {
context.drawImage(this, 0, 0);
};
};
</script>
備註:
或許有人會覺得為什麼不直接用下面的語法就好
var img = new Image();
img.src = "car.png";
context.drawImage(img, 0, 0);
原因是如果沒有綁定onload事件,會發生圖檔沒載下載來情形。
No comments:
Post a Comment