HTML DOM 快速導覽 - CanvasRenderingContext2D 物件的方法 drawImage()

CanvasRenderingContext2D 為 HTML 5 內嵌元素 (embedded content) <canvas> 的 getContext() 方法所回傳的物件 (object) ， drawImage() 為 CanvasRenderingContext2D 的方法，用來畫出圖片檔案，也就是 JPG 、 PNG 等圖檔。



drawImage() 有三個參數版本
drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)


image 為圖片物件， (dx, dy) 為圖片的起始座標， dw 為圖片的寬， dh 為圖片的高。舉例如下
function run() {
    var d = document.getElementsByTagName("canvas");
    var c = d[0].getContext("2d");
    var img = new Image();  
    img.onload = function(){  
        for (var i = 0; i < 4; i++){  
            for (var j = 0; j < 4; j++){  
                c.drawImage(img, j * 50, i * 50, 50, 50);  
            }
        }  
    }  
    img.src = 'gear.png';
}

/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：htmldemo113.js
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 */


此例用 document 物件的 getElementsByTagName() 方法 (method) ，取得標籤名稱為 canvas 的 HTMLCollection 物件，文件的第一個 <canvas> 元素亦即該 HTMLCollection 索引值為 0 的物件
var d = document.getElementsByTagName("canvas");
var c = d[0].getContext("2d");


然後利用迴圈畫出 4 * 4 個圖片
var img = new Image();  
img.onload = function(){  
    for (var i = 0; i < 4; i++){  
        for (var j = 0; j < 4; j++){  
            c.drawImage(img, j * 50, i * 50, 50, 50);  
        }
    }  
}  
img.src = 'gear.png';


我們以下面的 HTML 文件載入
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="htmldemo113.js" type="text/javascript"></script>
</head>
<body onload="run();">
<canvas id="demo" width="200" height="200"></canvas>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：htmldemo113.html
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 -->


瀏覽器 (browser) 開啟如下



中英文術語對照
內嵌元素embedded content
物件object
屬性attribute
方法method
瀏覽器browser


您可以繼續參考
HTML 5 範例

HTML 元素物件


相關目錄
HTML DOM 快速導覽
JavaScript 教材
首頁


參考資料
https://developer.mozilla.org/en/DOM/HTMLCanvasElement
https://developer.mozilla.org/en/HTML/Element/canvas
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)