HTML5 Canvas 绘制图像

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

html5画布具有用于在其上绘制图像的选项。您可以使用drawImage()2D上下文对象上的各种 功能 来执行此操作。有三种不同的drawImage() 功能 :

drawImage(image,?dx,?dy);
drawImage(image,?dy,?dw,?dh);
drawImage(image,?sx,?sy,?sw,?sh,?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,?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,?dh);

参数为sx，sy，sw和sh（声明sx,sy矩形开始）图像，并且宽度（sw）和高度（sh）的矩形.

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

HTML5 Canvas 合成 ? ?HTML5 Canvas 绘制文本

查看更多关于HTML5 Canvas 绘制图像的详细内容...