1.7.1 绘制图像
绘制图像需要使用 drawImage() 方法。此方法需要一个图像对象和一个起始点坐标作为参数，其
中起始点坐标是相对于canvas的左上角的位置。如：
<script>
context.drawImage(imageObj, x, y);
</script>
效果图
代码
<!DOCTYPE HTML>
<html>
<head>
<style> body { margin: 0px; padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style> <script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d"); var imageObj = new Image();
imageObj.onload = function() { context.drawImage(imageObj, 69, 50);
};
imageObj.src =
"http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg"; };
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
</body>
</html>
关于图像的说明
由于 drawImage() 方法需要一个图像对象作为参数，所以我们需要在实际调用 drawImage() 之前就加载图像。这一要求可以通过图像对象的 onload 事件来实现。不过要注意的是， onload 应该在用图像对象的src属性指定图像来源之前就进行赋值。
1.7.2 图像尺寸
方法 drawImage() 还可以接受 destWidth 和 destHeight 两个参数用来以任意指定的尺寸显示图像。如：
<script>
context.drawImage(imageObj, x, y, width, height); </script>
效果图
代码
<!DOCTYPE HTML>
<html>
<head>
<style> body { margin: 0px; padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style> <script>
window.onload = function() {
var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");
var x = 188; var y = 130; var width = 200; var height = 137; var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, x, y, width, height);
};
imageObj.src =
"http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg"; };
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
</body>
</html>
1.7.3 图像裁剪
方法 drawImage() 还可以增加另六个参数来实现对图像的裁剪。这六个参数是, sourceX,
sourceY, sourceWidth, sourceHeight, destWidth 和 destHeight。这六个参数对应的含义可以参阅后面的示意图。
<script>
context.drawImage(imageObj, sx, sy, sw, sh, dx, dy, dw, dh); </script>
效果图
代码
<!DOCTYPE HTML>
<html>
<head>
<style> body { margin: 0px; padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style> <script>
window.onload = function() {
var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var imageObj = newImage();
imageObj.onload = function() { // 绘制剪裁的图像
var sourceX = 150; var sourceY = 0; var sourceWidth = 150; var sourceHeight = 150; vardestWidth = sourceWidth; var destHeight = sourceHeight; var destX = canvas.width / 2 - destWidth / 2; vardestY = canvas.height / 2 - destHeight / 2;
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
};
imageObj.src =
"http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg";
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
</body>
</html>
1.7.4 图像加载器
当在canvas中要使用多幅图像的时候，最好是在绘制图像之前就把图像全部加载。一个方便的办法是用一个图像加载函数一下在把图像全加载进图像对象中来，然后再调用一个用户定义的函数。效果图
代码
<!DOCTYPE HTML>
<html>
<head>
<style> body { margin: 0px; padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
function loadImages(sources, callback) {
var images = {}; var loadedImages = 0;
var numImages = 0; // 获取图像源的数量
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];
}
}
window.onload = function(images) {
var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");
var sources = { darthVader: "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg", yoda:
"http://www.html5canvastutorials.com/demos/assets/yoda.jpg"
};
loadImages(sources, function(images) {
context.drawImage(images.darthVader, 100, 30, 200, 137); context.drawImage(images.yoda, 350, 55, 93, 104);
});
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>