drawimage缩放本质是控制图片在画布上的绘制位置和尺寸，5参数仅缩放，9参数先裁剪再缩放；需注意变换矩阵累积、设备像素比适配及坐标计算逻辑。
Canvas 中用 drawImage 缩放图片时，坐标和尺寸怎么算？
缩放不是“改图片本身”，而是控制它在画布上**画多大、画在哪**。关键就看 drawImage 用的是哪套参数签名——传 5 个还是 9 个参数，行为完全不同。
- 5 参数：
drawImage(img, dx, dy, dWidth, dHeight)→ 只缩放不裁剪，dx/dy是左上角位置，dWidth/dHeight是目标绘制宽高 - 9 参数：
drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)→ 先从原图裁剪一块（sx/sy/sWidth/sHeight），再缩放到目标区域（dx/dy/dWidth/dHeight） - 常见错误：把原图尺寸当目标尺寸传，结果图片被拉伸或只显示左上角一小块
图片移动后缩放失灵？检查 ctx.translate 和 ctx.scale 是否残留
Canvas 的变换是累积的。一旦调用过 ctx.translate(100, 50) 或 ctx.scale(2, 2)，后续所有 drawImage 都会受其影响，连坐标和尺寸都会被“扭曲”。
- 每次需要独立缩放/移动时，优先用
drawImage的参数控制，而不是靠ctx.transform系列 API - 非用不可时，务必配对使用
ctx.save()和ctx.restore() - 调试技巧：在
drawImage前加一句console.log(ctx.getTransform())（Chrome/Firefox 支持），看当前变换矩阵是不是单位阵
缩放后图片模糊？和 canvas 像素比、图像源分辨率有关
HTML5 Canvas 默认按 CSS 像素渲染，但实际绘图缓冲区可能被设备像素比（window.devicePixelRatio）拉高。如果没适配，缩放时浏览器会插值重采样，导致发虚。
扁平化医疗专业人员矢量插画
下载
扁平化医疗专业人员矢量插画适用于医疗保健品牌宣传（医疗保健机构的品牌宣传材料，如海报、传单、广告等）、教育性儿童图书（向儿童介绍健康和医疗知识的图书中作为插图）、医院或诊所内部标识（医院或诊所的内部导航标识、科室指示牌等）、卫生教育课程（卫生教育课程的教材、活动手册或幻灯片中的视觉元素）、儿童医疗设施（儿童医院或儿科诊室的装饰和环境布置）、公共医疗卫生宣传、社交媒体健康宣传（社交媒体上分享的健康小
- 解决方法：创建 canvas 时手动设置
width/height属性，使其等于clientWidth * devicePixelRatio等，再用 CSS 控制显示大小 - 缩放比例接近整数（如 2x、0.5x）时模糊较轻；非整数（如 1.37x）更容易暴露插值缺陷
- 图像本身分辨率太低（比如 100×100 的图放大到 400×400），再怎么调也救不回细节
想拖拽缩放图片？别直接改 img 对象，操作绘制参数就行
图片对象（HTMLImageElement）是只读的，不能“移动它”。所谓移动缩放，本质是每一帧用新坐标、新尺寸调用 drawImage。
立即学习“前端免费学习笔记（深入）”；
- 维护几个状态变量：
imgX、imgY（左上角位置）、imgScale（缩放系数） - 绘制时：用
drawImage(img, imgX, imgY, img.width * imgScale, img.height * imgScale) - 监听
mousedown/mousemove更新imgX/imgY；滚轮事件改imgScale，记得同时平移锚点（否则会绕左上角缩放） - 容易漏掉：缩放时没重新计算鼠标相对于图片的偏移，导致“拖不动”或“跳变”
Canvas 的缩放和移动，本质就是反复调用 drawImage 并动态算那几个数字。最常出问题的地方，是混淆了“原图区域”和“画布目标区域”，或者忘了变换状态是全局累积的。
