HTML canvas setTransform() 方法

在 HTML Canvas 中，setTransform() 方法用于设置当前变换矩阵，从而影响绘制的图形。这个方法可以用来实现平移、旋转、缩放等操作，非常灵活和强大。

语法

context.setTransform(a, b, c, d, e, f);

• a：水平缩放
• b：水平倾斜
• c：垂直倾斜
• d：垂直缩放
• e：水平移动
• f：垂直移动

参数说明

• a 和 d 控制水平和垂直缩放，可以为负值
• b 和 c 控制水平和垂直倾斜
• e 和 f 控制水平和垂直移动

示例

平移

context.setTransform(1, 0, 0, 1, 100, 100);

这段代码将当前绘图的原点移动到 (100, 100) 的位置。

旋转

context.setTransform(Math.cos(angle), Math.sin(angle), -Math.sin(angle), Math.cos(angle), 0, 0);

这段代码将当前绘图旋转 angle 弧度。

缩放

context.setTransform(2, 0, 0, 2, 0, 0);

这段代码将当前绘图水平和垂直方向都放大两倍。

注意事项

• setTransform() 方法会覆盖之前的变换矩阵，而不是叠加
• 如果需要叠加变换，可以使用 context.transform() 方法

总的来说，setTransform() 方法是 HTML Canvas 中非常重要的一个方法，可以帮助我们实现各种复杂的图形变换效果。希望通过本文的介绍，你对这个方法有了更深入的理解和应用。