七、圖像 Images
7.1繪製圖像 Draw Image
爲了使用HTML5畫布繪製圖像，可以使用drawImage()方法，該方法需要一個圖像對象和一個目標點。目標點定義圖像左上角相對於畫布左上角的座標值。
因爲drawImage()方法需要圖像對象作爲參數，所以要首先創建一個圖像，並在調用drawImage()方法之前將其加載。可以通過使用圖像對象的onload屬性來實現這一點。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
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 = new Image();
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>
以上代碼演示了通過圖片加載器載入圖片，創建圖片對象、綁定圖片載入事件，並保存在圖片數組中。當圖片載入成功時裁切並在畫布上繪製圖片。