HTML5 Canvas 教程：七、影象
七、影象 Images
7.1繪製圖像 Draw Image
為了使用HTML5畫布繪製圖像，可以使用drawImage()方法，該方法需要一個影象物件和一個目標點。目標點定義影象左上角相對於畫布左上角的座標值。
因為drawImage()方法需要影象物件作為引數，所以要首先建立一個影象，並在呼叫drawImage()方法之前將其載入。可以通過使用影象物件的onload屬性來實現這一點。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin:
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj =
imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);
};
imageObj.src = 'darth-vader.jpg';
</script>
</body>
</html>
以上程式碼演示了在畫布上繪製一張圖片。
7.2圖片尺寸 Image Size
若要使用HTML5畫布設定影象的大小，可以再向drawImage()方法傳入兩個附加引數：寬度width和高度height。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 188;
var y = 30;
var width = 200;
var height = 137;
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, x, y, width, height);
};
imageObj.src = 'darth-vader.jpg';
</script>
</body>
</html>
以上程式碼演示了再畫布上繪製圖片，並改變圖片的原始尺寸。
7.3影象裁減 Image Crop
要使用HTML5 Canvas裁剪影象，我們可以向drawImage()方法新增六個附加引數，sourceX、sourceY、sourceWidth、sourceHeight、destWidth和destHeight。這些引數定義了要從影象中剪切出的矩形的位置和大小。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
// draw cropped image
var sourceX = 150;
var sourceY = 0;
var sourceWidth = 150;
var sourceHeight = 150;
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = canvas.width / 2 - destWidth / 2;
var destY = canvas.height / 2 - destHeight / 2;
context.drawImage(imageObj, sourceX, sourceY, sourceWidth,
sourceHeight, destX, destY, destWidth, destHeight);
};
imageObj.src = 'darth-vader.jpg';
</script>
</body>
</html>
以上程式碼演示了從原始圖片中裁減出一部分，並繪製在畫布上。
7.4影象載入器 Image Loader
當HTML5畫布應用程式需要多個影象時，在畫布上繪製之前載入所有影象通常是個好主意。為了簡化載入過程，可以方便地使用影象載入器函式，該函式接受影象源的雜湊，建立影象的雜湊，然後在載入了所有影象時呼叫使用者定義的函式。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var sources = {
darthVader: 'darth-vader.jpg',
yoda: 'yoda.jpg'
};
loadImages(sources, function(images) {
context.drawImage(images.darthVader, 100, 30, 200, 137);
context.drawImage(images.yoda, 350, 55, 93, 104);
});
</script>
</body>
</html>
以上程式碼演示了通過圖片載入器載入圖片，建立圖片物件、繫結圖片載入事件，並儲存在圖片陣列中。當圖片載入成功時裁切並在畫布上繪製圖片。