Canvas scale方法详解，掌握缩放变换原理、镜像效果和实际应用技巧。scale方法用于缩放坐标系的单位长度，可以实现放大、缩小和镜像效果。
ctx.scale(x, y)
| 参数 | 类型 | 说明 |
|---|---|---|
| x | number | 水平缩放因子（1为原始大小） |
| y | number | 垂直缩放因子（1为原始大小） |
scale方法改变坐标系的单位长度：
ctx.scale(2, 2) // 放大2倍
ctx.scale(0.5, 0.5) // 缩小一半
ctx.scale(-1, 1) // 水平镜像
ctx.scale(1, -1) // 垂直镜像
scale调用是累积的：
ctx.scale(2, 2) // 放大2倍
ctx.scale(2, 2) // 再放大2倍，总共4倍
// 等价于
ctx.scale(4, 4)
x和y可以使用不同的缩放因子：
ctx.scale(2, 1) // 水平放大2倍，垂直不变
ctx.scale(1, 2) // 水平不变，垂直放大2倍
ctx.scale(2, 0.5) // 水平放大2倍，垂直缩小一半
使用负值缩放因子实现镜像：
// 水平镜像
ctx.scale(-1, 1)
// 垂直镜像
ctx.scale(1, -1)
// 对角镜像
ctx.scale(-1, -1)
scale会影响所有绑制属性，包括线宽：
ctx.lineWidth = 2
ctx.scale(3, 3)
// 实际线宽变为 2 * 3 = 6
// 解决方案：根据缩放调整线宽
ctx.lineWidth = 2 / scale
function fitToContainer(ctx, width, height) {
const scaleX = canvas.width / width
const scaleY = canvas.height / height
const scale = Math.min(scaleX, scaleY)
ctx.scale(scale, scale)
}
累积效应
多次scale会累积，注意重置。
影响所有属性
scale影响坐标、尺寸、线宽等所有绑制属性。
负值镜像
负值缩放会产生镜像效果，注意坐标系方向。
原点位置
scale以原点为中心缩放，配合translate可改变缩放中心。