HTML5 Canvas 绘制图像

HTML5 Canvas 使用drawImage()绘制图像，在画布上绘制图像之前，需要创建一个Image对象，然后将图像加载到内存中。

HTML5画布具有用于在其上绘制图像的选项。您可以使用drawImage()2D上下文对象上的各种功能来执行此操作。有三种不同的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 = "https://www.nhooo.com/run/html/canvas-shot.png";

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

image.addEventListener('load', drawImage1);

该drawImage1参数是事件触发时调用的函数。
这是一个完整的代码示例，可在画布上创建，加载和绘制图像:

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

var image1 = null;

function drawEx1() {
    image1 = new Image();
    image1.src =
        "https://www.nhooo.com/run/html/canvas-shot.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）的矩形.

这是在画布上绘制时图像矩形的外观: