canvas.drawImage() 是 HTML5 Canvas API 中用于绘制图像的核心方法，可以将图片、画布或视频帧绘制到 canvas 上。

基本语法

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、SVGImageElement、HTMLVideoElement、HTMLCanvasElement、ImageBitmap 或 OffscreenCanvas
sx, sy 源图像裁剪起始坐标
sWidth, sHeight 源图像裁剪宽高
dx, dy 目标画布上的绘制起始坐标
dWidth, dHeight 目标画布上的绘制宽高

三种用法示例

1. 基础绘制（原尺寸）

const img = new Image();
img.src = 'example.jpg';
img.onload = () => {
  ctx.drawImage(img, 0, 0); // 从 (0,0) 开始绘制原图
};

2. 缩放绘制

ctx.drawImage(img, 50, 100, 200, 150); // 缩放到 200x150 像素

3. 裁剪并绘制

// 从源图 (20,30) 处截取 100x80 区域，绘制到 (0,0) 且缩放为 300x240
ctx.drawImage(img, 20, 30, 100, 80, 0, 0, 300, 240);

重要注意事项

  1. 等待图片加载完成：必须在 onload 回调或图片完全加载后调用，否则画布空白
  2. 跨域问题：跨域图片需设置 img.crossOrigin = 'anonymous' 且服务端返回正确 CORS 头
  3. 性能影响：频繁调用大图绘制可能影响性能，可考虑使用离屏 Canvas 缓存
  4. 不支持 SVG 动画：只能绘制静态 SVG 内容

常见应用场景

  • 游戏开发中的精灵图渲染
  • 图片编辑器（裁剪、缩放、滤镜）
  • 水印添加
  • 图像合成与导出（结合 toDataURL()）

需要我演示某个具体场景的完整代码吗？