Canvas重置变换方法详解，掌握resetTransform、setTransform的使用技巧。重置变换用于清除之前应用的变换效果，恢复坐标系到初始状态。
| 方法 | 说明 |
|---|---|
| resetTransform() | 重置为单位矩阵 |
| setTransform(1, 0, 0, 1, 0, 0) | 设置为单位矩阵 |
resetTransform方法将变换矩阵重置为单位矩阵：
ctx.translate(100, 100)
ctx.rotate(Math.PI / 4)
ctx.scale(2, 2)
// 重置所有变换
ctx.resetTransform()
// 现在坐标系恢复到初始状态
ctx.fillRect(0, 0, 50, 50) // 绘制在左上角
setTransform方法设置新的变换矩阵，同时清除之前的变换：
// 重置并设置新变换
ctx.setTransform(a, b, c, d, e, f)
// 重置为单位矩阵
ctx.setTransform(1, 0, 0, 1, 0, 0)
| 方法 | 优点 | 缺点 |
|---|---|---|
| resetTransform | 只重置变换，不影响其他状态 | 无法恢复之前状态 |
| save/restore | 保存所有状态，可嵌套 | 性能开销较大 |
// 使用resetTransform
ctx.translate(100, 100)
ctx.fillRect(0, 0, 50, 50)
ctx.resetTransform()
ctx.fillRect(0, 0, 50, 50)
// 使用save/restore
ctx.save()
ctx.translate(100, 100)
ctx.fillRect(0, 0, 50, 50)
ctx.restore()
ctx.fillRect(0, 0, 50, 50)
setTransform可以在重置的同时设置新变换：
// 重置并设置平移
ctx.setTransform(1, 0, 0, 1, 100, 50)
// 重置并设置缩放
ctx.setTransform(2, 0, 0, 2, 0, 0)
// 重置并设置旋转
const angle = Math.PI / 4
ctx.setTransform(Math.cos(angle), Math.sin(angle), -Math.sin(angle), Math.cos(angle), 0, 0)
在循环中使用setTransform比save/restore更高效：
// 不推荐：使用save/restore
for (let i = 0; i < 1000; i++) {
ctx.save()
ctx.translate(i, 0)
ctx.fillRect(0, 0, 10, 10)
ctx.restore()
}
// 推荐：使用setTransform
for (let i = 0; i < 1000; i++) {
ctx.setTransform(1, 0, 0, 1, i, 0)
ctx.fillRect(0, 0, 10, 10)
}
ctx.setTransform(1, 0, 0, 1, 0, 0)
只重置变换
resetTransform只重置变换矩阵，不影响fillStyle、strokeStyle等其他状态。
浏览器兼容
resetTransform是较新的API，老浏览器可能不支持，可用setTransform(1,0,0,1,0,0)替代。
性能优势
在大量绑制时，setTransform比save/restore更高效。