DrawImage是一种可以在HTML5 Canvas中绘制图像的方法。它可以将来自不同源的图像或视频中的图像以及剪裁版本以及视频中的帧绘制到画布上，并利用它实现不同的功能。
绘制同一源的已知大小图像
第一种使用DrawImage绘图的情况是从同一源获取一些已知大小的图像。这种情况下，我们需要一个Canvas元素和一个Context对象:
<canvas id=\"myCanvas\" width=\"600\" height=\"400\"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
</script>
现在，我们已经用JS获取了我们需要的canvas和context，下一步是得到我们要绘制的图片。假设我们有两张图片，一张是\"img1.png\"，大小为200像素宽和100像素高，另一张是\"img2.png\"，大小为400像素宽和200像素高。
var firstImage = new Image();
firstImage.src = 'img1.png';
firstImage.onload = function() {
context.drawImage(firstImage, 50, 50);
}
var secondImage = new Image();
secondImage.src = 'img2.png';
secondImage.onload = function() {
context.drawImage(secondImage, 150, 150);
}
这段代码中，我们首先创建两个新的Image对象，然后为每个对象设置src属性以获取它的路径。接下来，我们在每个对象上设置一个onload事件处理程序，以确保我们的图像在加载后立即读取。最后，我们可以调用context.drawImage()方法将两个图像绘制到我们的画布上，并传递我们要在画布上绘制图像的坐标。
绘制子图像
在某些情况下，我们可能不想在我们的画布上绘制整个图像，而只需要保留图像的一部分来指定，例如，我们可能想要在画布上绘制一张地图，但只想绘制我们当前位置周围的地图区域。
要实现这一点，我们需要使用额外的参数来定义要绘制的图像的子集:
var image = new Image();
image.src = 'map.png';
image.onload = function() {
context.drawImage(image, 0, 0, 100, 100, 50, 50, 200, 200);
}
这个例子绘制一个名为map.png的图像，它的左上角位于坐标(0,0)，尺寸为100 x 100像素。然后，我们使用相同的context.drawImage()方法并传递了额外的参数来指定在画布上绘制图像的子集区域的位置和大小。
裁剪并绘制图像
DrawImage方法还允许我们在绘制图像时剪切其中的一部分。这使得我们可以创建一些非常有趣的效果，例如为游戏中的一个角色绘制动画:
var image = new Image();
image.src = 'character.png';
image.onload = function() {
context.drawImage(image, 0, 0, 50, 50, 0, 0, 100, 100);
setTimeout(function() {
context.drawImage(image, 50, 0, 50, 50, 0, 0, 100, 100);
}, 500);
}
在这个例子中，我们创建了一个名为character.png的图像，它包含一系列动画帧。然后，我们在画布上绘制第一帧(位于左上角)。在500毫秒后，我们重新调用context.drawImage()方法，这次我们传递了不同的sourceX参数来剪切不同的帧，将下一帧绘制到画布上。
DrawImage方法是创建基于HTML5 Canvas的图形和动画的重要方法之一。借助它，我们可以轻松地绘制甚至是处理复杂的图像和动画，并从中受益。
注：本文部分文字与图片资源来自于网络，转载此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益，请立即后台留言通知我们，情况属实，我们会第一时间予以删除，并同时向您表示歉意
