ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
| 方法 | 说明 | | --- | --- | | 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() 方法。