ctx.scale(sx, sy)缩放整个坐标系，影响位置、尺寸和线宽；需用translate调整中心点，配合save/restore防状态污染，放大位图会模糊，建议用css缩放或关闭抗锯齿。
直接用 ctx.scale(sx, sy) 就能缩放画布上的所有后续绘制内容，但关键不是“调用”，而是理解它缩放的是整个坐标系——位置、尺寸、线宽全被影响。
scale 的基本用法和效果
参数 sx 和 sy 是缩放倍数，不是像素值：
-
scale(1, 1)：无变化 -
scale(2, 2)：图形变大两倍，同时绘制起点（如fillRect(50, 50, 100, 100)）的实际坐标也变成(100, 100)，宽高变成(200, 200) -
scale(0.5, 1)：横向压缩一半，纵向不变，可实现简易镜像或压扁效果
避免坐标偏移：必须控制缩放中心点
默认以画布左上角（0, 0）为缩放中心，这常导致图形“跑偏”。要以某点（比如图形中心或鼠标位置）为中心缩放，得组合 translate：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 先
ctx.translate(cx, cy)把原点移到目标中心点 - 再
ctx.scale(sx, sy) - 最后
ctx.translate(-cx, -cy)把原点移回（或按新坐标系绘制）
更稳妥的做法是配合 save() 和 restore()，防止缩放污染后续绘制。
防止缩放累积和状态混乱
多次调用 scale 会让缩放因子相乘（比如连续两次 scale(2, 2) 相当于 scale(4, 4)），容易失控：
- 每次变换前用
ctx.save()保存当前状态 - 绘制完成后用
ctx.restore()恢复，彻底隔绝影响 - 需要重置全部变换时，用
ctx.setTransform(1, 0, 0, 1, 0, 0)一步回到初始坐标系
缩放图像时注意清晰度问题
放大位图会模糊，这不是代码错，而是像素拉伸的物理限制：
- 优先使用矢量图形（如路径绘制）或高分辨率源图
- 对整画布做视觉缩放，推荐用 CSS
transform: scale()缩放 canvas 元素本身，由 GPU 合成，不伤画质 - 若必须用
drawImage缩放图片，可结合imageSmoothingEnabled = false关闭抗锯齿，获得锐利像素风格（适合像素游戏）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
