深入剖析：canvas 的 ctx.drawImage 9 个参数详细解读

`ctx.drawImage()` 是 Canvas API 中的一个方法，用于在画布上绘制一个图像。这个方法有多个可选参数，具体如下： 1. `src`（必需）：要绘制的图像的源，可以是 `Image` 对象、`HTMLImageElement`、`HTMLCanvasElement`、`SVGImageElement` 或 `CanvasRenderingContext2D` 对象。 2. `x`（必需）：图像在画布上的左上角的 x 坐标。默认值为 0。 3. `y`（必需）：图像在画布上的左上角的 y 坐标。默认值为 0。 4. `width`（可选）：图像的宽度。如果设置为 `null` 或 `undefined`，则使用图像的原始宽度。如果不设置，则使用整个图像。 5. `height`（可选）：图像的高度。如果设置为 `null` 或 `undefined`，则使用图像的原始高度。如果不设置，则使用整个图像。 6. `dx`（可选）：如果设置了 `dx` 和 `dy`，则图像将从 `dx, dy` 的位置开始绘制，而不是 `x, y`。默认值为 0。 7. `dy`（可选）：与 `dx` 类似，表示图像的顶部偏移量。默认值为 0。 8. `scaleX`（可选）：图像在 x 轴上的缩放比例。默认值为 1，表示不缩放。 9. `scaleY`（可选）：图像在 y 轴上的缩放比例。默认值为 1，表示不缩放。 10. `rotation`（可选）：图像的旋转角度，以弧度为单位。默认值为 0，表示无旋转。 11. `origin`（可选）：一个数组 `[x, y]`，表示旋转中心点相对于图像左上角的位置。如果不设置，旋转中心默认在图像左上角。 12. `flatten`（可选）：布尔值，表示是否将图像转换为像素数据并进行平铺填充。默认值为 `false`，即不转换。 通过这些参数，你可以灵活地控制图像在画布上的位置、大小、旋转和缩放等效果。 ######[AI写代码神器 | 501点数解答 | 2024-06-06 14:17:54]