drawImage 是 Canvas 唯一绘图方法，含3种参数形式：基础型（image,x,y）整图原尺寸绘制；缩放型（image,x,y,w,h）整图拉伸至目标区域；高级型（image,sx,sy,sw,sh,dx,dy,dw,dh）支持源裁剪与目标缩放。
Canvas 的 drawImage 是唯一能将图像（图片、视频、另一块 Canvas）绘制到当前画布上的方法，但它有 3 种参数形式，容易混淆。关键不是记参数个数，而是理解「源区域」和「目标区域」的对应逻辑。
基础用法：只传一个图像 + 位置坐标
最简单的情况：把整张图按原始尺寸，画到画布上指定位置。
ctx.drawImage(image, x, y)-
image可以是或元素 -
x和y是目标画布上的左上角坐标（不是中心点） - 图像保持原始宽高，不缩放、不裁剪
缩放绘制：指定目标宽高
想让图像铺满某块区域，或等比/非等比缩放时用这种写法。
ctx.drawImage(image, x, y, width, height)- 前两个参数仍是目标位置（左上角）
-
width和height是最终绘制在画布上的尺寸（即目标区域大小） - 源图仍取全部内容，只是被拉伸或压缩填入该矩形
- 例如：
drawImage(img, 10, 20, 200, 100)把整张图强行压进 200×100 的矩形里
高级用法：源区域裁剪 + 目标区域绘制
真正灵活的用法——从原图中抠一块（任意矩形），再把它画到画布任意位置，并可缩放。
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)- 前 4 个是「源参数」：从
image的(sx, sy)点开始，截取宽sWidth、高sHeight的矩形区域 - 后 4 个是「目标参数」：把这个截取的区域，绘制到画布上以
(dx, dy)为左上角、宽dWidth、高dHeight的矩形中 - 常见用途：雪碧图（Sprite）切片、视频帧提取、局部放大、图像拼接
- 注意：
sx/sy超出图像范围会静默忽略超出部分；sWidth/sHeight为负数会翻转源区域（但极少用）
实用细节与避坑提示
这些小点不写在规范里，但实际开发常踩坑：
- 图像必须已加载完成才能绘制，否则什么也不出现（可用
img.onload或Promise确保） - 跨域图片需设置
img.crossOrigin = "anonymous"，否则调用drawImage后会污染画布，导致无法读取像素（getImageData报错） - 目标坐标或尺寸为
0或负数时，该次绘制会被跳过（不报错） - 如果源尺寸（
sWidth/sHeight）为0，整个调用无效；目标尺寸为0则不显示（但不算错误） - Canvas 绘制是即时的，没有“图层”概念，所有
drawImage都直接像素写入当前画布缓冲区
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
