如何利用HTML的Canvas的transform方法进行自由矩阵变换操作-html教程-PHP中文网

transform()会“越用越歪”是因为它右乘当前矩阵导致叠加变形，而settransform()先重置为单位矩阵再应用新矩阵，完全可控；必须配合save()/restore()隔离作用域以防状态污染。

如何利用html的canvas的transform方法进行自由矩阵变换操作

直接用 transform() 很容易叠加出错，真正可控的自由变换应该优先用 setTransform()，再配合 save()/restore() 隔离作用域。

为什么 transform(a,b,c,d,e,f) 会“越用越歪”

transform() 不是设置新矩阵，而是把传入的矩阵右乘到当前矩阵上——也就是“在已有变形基础上再变形”。比如你已经 rotate(Math.PI/4) 过，再调一次 transform(1,0,0,1,10,0)，平移量会被旋转坐标系影响，最终不是向右移10像素，而是沿45°方向移10像素。

常见错误现象：transform() 调用多次后，图形位置/大小完全失控，debug 时发现 e 和 f 平移值越来越不对
根本原因：矩阵乘法不可交换，且 Canvas 内部不暴露当前矩阵值，无法直观判断累积状态
性能影响：连续 transform() 会引入浮点误差累积，尤其在动画循环中几秒后就明显偏移

setTransform() 才是自由变换的正确入口

setTransform(a,b,c,d,e,f) 会先重置为单位矩阵 [1,0,0,1,0,0]，再应用你给的矩阵。这意味着你传什么，画布就按什么算，没有隐藏依赖。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

绕某点 (cx, cy) 旋转 θ 弧度，直接套公式设矩阵，不用手动 translate/rotate/translate：
ctx.setTransform(Math.cos(θ), Math.sin(θ), -Math.sin(θ), Math.cos(θ), cx - cx * Math.cos(θ) + cy * Math.sin(θ), cy - cx * Math.sin(θ) - cy * Math.cos(θ));
想让一个图标以自身中心缩放 1.2 倍并右倾 10°，可一次性构造：
ctx.setTransform(1.2, 0.2, 0, 1.2, x + w/2, y + h/2);（其中 x,y,w,h 是原始位置尺寸）
注意参数顺序：Canvas 文档里写的是 a,b,c,d,e,f，但数学上对应的是列主序矩阵 [a,c,e; b,d,f]，别和 CSS 的 matrix(a,b,c,d,e,f) 混淆（CSS 是行主序）

必须搭配 save/restore 来保护绘图上下文

哪怕用了 setTransform()，只要没封装好，后续绘制仍会被污染。Canvas 的变换状态是全局的、持续的，不是单次生效。

典型错误：在 drawIcon() 里调了 setTransform(...)，但没 save()，导致之后画文字、边框全跟着歪
正确模式：ctx.save(); ctx.setTransform(...); drawSomething(); ctx.restore();
restore() 恢复的是整个状态栈，包括 fillStyle、lineWidth、当前矩阵等，比手动 setTransform(1,0,0,1,0,0) 更彻底、更安全
如果只是临时重置，ctx.resetTransform() 是最轻量的选择（它等价于 setTransform(1,0,0,1,0,0)），但不能撤销 fillStyle 等其他状态