绘制图片
CanvasRenderingContext2D.drawImage() 有 3 种重载形式，共 3、5 或 9 个参数。
所有参数均按 源图像 → 目标画布 的映射关系工作。
✅ 基本语法
js
ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);参数速查表
| 参数名 | 含义 | 单位 | 出现形式 |
|---|---|---|---|
image | 图像源（HTMLImageElement、HTMLCanvasElement、HTMLVideoElement、ImageBitmap…） | — | 3 种都必需 |
sx | 源图像裁剪起始 x 坐标 | px | 仅在 9 参数 形式 |
sy | 源图像裁剪起始 y 坐标 | px | 同上 |
sWidth | 源图像裁剪 宽度（取多少像素） | px | 同上 |
sHeight | 源图像裁剪 高度（取多少像素） | px | 同上 |
dx | 画布上绘制起始 x 坐标 | px | 3、5、9 参数 都有 |
dy | 画布上绘制起始 y 坐标 | px | 同上 |
dWidth | 画布上绘制 目标宽度（可缩放） | px | 5、9 参数 有 |
dHeight | 画布上绘制 目标高度（可缩放） | px | 5、9 参数 有 |
🎯 三种形式对比
| 形式 | 功能 | 示例代码 |
|---|---|---|
| 3 参数 | 完整原图 → 画布指定位置（不缩放） | ctx.drawImage(img, 10, 20); |
| 5 参数 | 完整原图 → 画布指定位置 + 缩放 | ctx.drawImage(img, 10, 20, 200, 100); |
| 9 参数 | 裁剪原图 → 画布指定位置 + 缩放 | ctx.drawImage(img, 50, 20, 200, 150, 0, 0, 100, 75); |
🚩 关键点
- 图像必须已加载完成（
img.complete === true），否则绘制空白或报错。 - 目标宽高与源宽高比例不同 会产生拉伸/压缩效果。
- 负值 会镜像翻转；超出图像边界 会静默忽略对应区域。
🎨 示意图
源图像 (200×150) 画布 (300×200)
┌────────────┐ ┌──────────────┐
│ │ │ │
│ sx,sy │ │ dx,dy │
│ ┌────┐ │ drawImage │ ┌────┐ │
│ │crop│ │ ────────► │ │draw│ │
│ └────┘ │ │ └────┘ │
└────────────┘ └──────────────┘
sWidth,sHeight dWidth,dHeight一句话记忆：
前 4 个参数决定“切哪块”，后 4 个参数决定“画到哪、画多大”。