JavaScript canvas 中 drawImage函数及其参数 介绍

        在前端开发里，Canvas 的 drawImage 方法是用于在画布上绘制图像的重要方法，它有三种不同的调用形式，每种形式对应的参数含义和功能各有不同。下面为你详细介绍：

---

一：最简形式：

context.drawImage(image, dx, dy);

参数解释

• image：此参数为必需项，它可以是一个 HTMLImageElement（即  元素）、HTMLVideoElement（ 元素）、HTMLCanvasElement（ 元素）或者 ImageBitmap 对象。它代表的是要绘制的图像源。

• dx：这也是必需参数，是一个数字类型的值，用来指定图像在画布上左上角的横坐标位置。

• dy：同样是必需参数，为数字类型，用于指定图像在画布上左上角的纵坐标位置。

代码示例：

        在这个例子中，图像会被绘制在画布上距离左上角横坐标 20 像素、纵坐标 20 像素的位置。

---

二。带有宽度和高度的形式

context.drawImage(image, dx, dy, dWidth, dHeight);

参数解释

• image：和前面一样，是要绘制的图像源。

• dx：指定图像在画布上左上角的横坐标位置。

• dy：指定图像在画布上左上角的纵坐标位置。

• dWidth：这是一个可选的数字参数，用于指定图像在画布上绘制的宽度。若不提供该参数，图像会以原始宽度绘制。

• dHeight：也是可选的数字参数，用于指定图像在画布上绘制的高度。若不提供该参数，图像会以原始高度绘制。

代码示例：

        此例中，图像会被绘制在距离画布左上角横坐标 20 像素、纵坐标 20 像素的位置，并且绘制的宽度和高度都为 100 像素。

---

三：带有裁剪区域的形式

context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

参数解释

• image：要绘制的图像源。

• sx：必需的数字参数，指定在图像源上裁剪区域左上角的横坐标位置。

• sy：必需的数字参数，指定在图像源上裁剪区域左上角的纵坐标位置。

• sWidth：必需的数字参数，指定在图像源上裁剪区域的宽度。

• sHeight：必需的数字参数，指定在图像源上裁剪区域的高度。

• dx：指定裁剪后的图像在画布上左上角的横坐标位置。

• dy：指定裁剪后的图像在画布上左上角的纵坐标位置。

• dWidth：指定裁剪后的图像在画布上绘制的宽度。

• dHeight：指定裁剪后的图像在画布上绘制的高度。

代码示例：

        在这个示例中，会从图像源的横坐标 50 像素、纵坐标 50 像素的位置开始裁剪一个宽度和高度都为 100 像素的区域，然后将这个裁剪后的区域绘制到画布上距离左上角横坐标 20 像素、纵坐标 20 像素的位置，并且绘制的宽度和高度同样为 100 像素。