Canvas 变换通过修改绘图上下文坐标系实现：translate 平移原点，rotate 绕原点顺时针旋转（弧度制），scale 缩放坐标单位；组合变换需注意顺序，用 save()/restore() 管理状态。
Canvas 的平移、旋转与缩放不是直接操作图形，而是通过变换绘图上下文的坐标系来实现。核心在于理解：每次调用 translate、rotate 或 scale，都会修改后续所有绘制所依赖的坐标系统，而非图形本身。
平移：用 translate(x, y) 移动坐标原点
调用 ctx.translate(dx, dy) 会把画布的 (0, 0) 原点移到 (dx, dy) 位置。之后所有坐标都以这个新原点为基准。
- 例如：
ctx.translate(100, 50)后再画fillRect(0, 0, 20, 30)，实际出现在画布上 (100, 50) 处 - 适合将绘制中心对齐到某点（如图形中心、鼠标位置）
- 注意：它不改变已有图形，只影响后续绘制
旋转：用 rotate(angle) 绕原点顺时针转动
ctx.rotate(angle) 按弧度值顺时针旋转当前坐标系。默认绕画布左上角 (0, 0) 旋转。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 45° 要写成
Math.PI / 4，90° 是Math.PI / 2 - 想绕图形中心（比如矩形中心在 (150, 100)）旋转？先
translate(150, 100)，再rotate(...)，最后translate(-150, -100)把原点移回 - 旋转后，x 轴和 y 轴方向都变了，后续
fillRect的宽高仍按新轴向解释
缩放：用 scale(sx, sy) 按比例拉伸坐标单位
ctx.scale(sx, sy) 表示：原来 1 像素的 x 方向长度，现在被解释为 sx 像素；y 同理。它放大/缩小的是整个坐标系的“刻度”。
立即学习“前端免费学习笔记（深入）”；
-
scale(2, 0.5)让图形横向拉长 2 倍、纵向压缩一半 - 线条宽度、文字大小、阴影偏移等也会被缩放（但
fillText渲染质量可能下降） - 若想只缩放图形而不影响文字，建议用 CSS 缩放整个
<canvas></canvas>元素，或改用路径 +fillText并手动调整字体大小
组合变换与状态管理
多个变换叠加时，顺序至关重要：先平移再旋转，和先旋转再平移，结果完全不同。推荐用 save() 和 restore() 隔离变换作用域。
-
ctx.save()保存当前坐标系状态（含所有变换）到栈顶 -
ctx.restore()恢复最近一次save()的状态，丢弃之后的所有变换 - 典型用法：绘制一个旋转缩放的图标前
save()，绘制完立即restore()，避免干扰后续图形
