HTML5画布具有用于在其上绘制图像的选项。我们可以在2D Context对象上使用各种drawImage()函数来执行此操作。有三种不同的drawImage()函数：

drawImage(image, dx, dy);
drawImage(image, dx, dy, dw, dh);
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

第一个参数" image"是要绘制的图像。本文稍后将说明如何创建和加载图像。

dx和dy参数是" destinationX"和" destinationY"的缩写。这些参数确定在画布上绘制图像的位置。

dw和dh参数是" destinationWidth"和" destinationHeight"的缩写。这些参数确定绘制图像时缩放图像的大小。

sx和sy参数是" sourceX"和" sourceY"的缩写。这些参数确定从源图像中的哪个位置开始将图像的矩形复制到画布上。

sw和sh参数是" sourceWidth"和" sourceHeight"的缩写。

创建和加载图像

在画布上绘制图像之前，需要创建一个" Image"对象，并将该图像加载到内存中。这是在JavaScript中完成的方式：

var image = new Image();
image.src = "http://Hyman.com/images/screenshots/tutorials-screenshot.png";

必须先完全加载图像，然后才能绘制图像。要确定图像是否已完全加载，请在图像上添加一个事件侦听器。加载图像时将调用此事件侦听器。看起来是这样的：

image.addEventListener('load', drawImage1);

drawImage1参数是事件触发时调用的函数。

这是一个完整的代码示例，可在画布上创建，加载和绘制图像：

window.onload = function() {
    drawEx1();
}

var image1 = null;

function drawEx1() {
    image1 = new Image();
    image1.src =
        "http://Hyman.com/images/screenshots/tutorials-screenshot.png";
    image1.addEventListener('load', drawImage1);
}

function drawImage1() {
    var canvas  = document.getElementById("ex1");
    var context = canvas.getContext("2d");

    context.drawImage(image1, 10, 10);
}

缩放图像

如本文开头所述，我们可以在绘制图像时缩放图像。这是一个代码示例，它绘制图像并将其缩放为200的宽度和100像素的高度：

var width  = 200;
var height = 100;
context.drawImage(image2, 10, 10, width, height);

绘制图像的一部分

可以仅将图像的一部分绘制到画布上。绘制的部分是从图像复制的矩形。这是代码示例：

var dx = 10;
var dy = 10;
var dw = 75;
var dh = 75;
var sx = 20;
var sy = 20;
var sw = 75;
var sh = 75;

context.drawImage(image3, sx, sy, sw, sh, dx, dy, dw, dh);

sx，sy，sw和sh参数从矩形的起始位置(sx，sy)中声明矩形的起始位置，以及宽度(sw)和高度(sh)矩形。