| 方法 | 说明 | | --- | --- | | translate() | 平移 | | scale() | 缩放 | | rotate() | 旋转 | | transform()、setTransform() | 变换矩阵 | Canvas 的这些变形操作，不仅可以用于图形，还可以用于图像和文字。 `cxt.translate(x, y)`：x 表示图形在 x 轴方向移动的距离，默认为 px；y 同理。 `cxt.scale(x, y)`：x 表示图形在 x 轴方向的缩放倍数，y 同理。另外，scale() 方法还有以下 “副作用” 需要注意，即 scale() 方法会改变图形的以下几点： - 左上角坐标（比如放大 2 倍，左上角坐标会变为原来的 2 倍） - 宽度或高度 - 线条宽度 `cxt.rotate(angle)`：参数 angle 表示图形旋转的角度，取值为 -Math.PI*2 ~ Math.PI*2。当 angle < 0 时，图形顺时针旋转；当 angel > 0 时，图形逆时针旋转。 推荐写法如下： ```js 120*Math.PI/180 // 120° 150*Math.PI/180 // 150° ``` ## 改变旋转中心 默认情况下，图形旋转是以 Canvas 坐标原点为旋转中心的。如果我们想以某一点（x，y）为旋转中心，可以先使用 translate(x, y)，然后再使用 rotate() 方法。