说说 Canvas 的旋转功能

末蓝、 2022-11-30 04:10 224阅读 0赞

首先我们先来看看两个函数。

## 1 setTransform() ##

画布上的每个对象都拥有一个当前的变换矩阵。利用 setTransform() 我们可以缩放、旋转、移动以及倾斜当前对象。

setTransform() 方法会把当前的变换矩阵重置为单位矩阵，然后以相同的参数运行 transform()。

语法：`context.setTransform(a,b,c,d,e,f);`

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>a</td> 
   <td>水平缩放绘图</td> 
  </tr> 
  <tr> 
   <td>b</td> 
   <td>水平倾斜绘图</td> 
  </tr> 
  <tr> 
   <td>c</td> 
   <td>垂直倾斜绘图</td> 
  </tr> 
  <tr> 
   <td>d</td> 
   <td>垂直缩放绘图</td> 
  </tr> 
  <tr> 
   <td>e</td> 
   <td>水平移动绘图</td> 
  </tr> 
  <tr> 
   <td>f</td> 
   <td>垂直移动绘图</td> 
  </tr> 
 </tbody> 
</table>

## 2 rotate() ##

rotate() 方法用于旋转当前的绘图。语法：`context.rotate(angle);`。angle 旋转弧度。所以如果传入的参数是角度，需要先将其转换为弧度，转换公式为`弧度 = 角度 * Math.PI/180` 。

## 3 示例 ##

Steve Fulton 举了这样一个示例：

context.fillStyle = "black";
    context.fillRect(20, 20, 25, 25);
    
    context.setTransform(1, 0, 0, 1, 0, 0);
    var angleInRadians = 45 * Math.PI / 180;
    context.rotate(angleInRadians);
    context.fillStyle = "red";
    context.fillRect(100, 100, 50, 50);

运行结果：  
![format_png][]

这里首先绘制了一个黑色矩形，然后调用 setTransform() 方法，接着把画布旋转 45 度，最后绘制红色矩形。

> 注意：只有 setTransform() 方法调用之后的绘图才有效。所以之前所绘制的黑色矩形并没有被旋转！

因为没有指定旋转原点，所以默认原点在 (0,0) ，导致红色矩形旋转后，有一半的区域移到了画布之外。

## 4 指定原点 ##

我们可以使用 translate(x,y) 方法来指定变换的原点。改写上面的示例：

const x = 100;
    const y = 100;
    const width = 50;
    const height = 50;
    context.translate(x + .5 * width, y + .5 * height);
    context.rotate(angleInRadians);
    context.fillStyle = "red";
    context.fillRect(-.5 * width, -.5 * height, width, height);

运行结果：

![format_png 1][]

这里首先修改原点位置为 (125,125)，即从此以后，原来的 (125,125) 变为坐标轴原点，即（0,0）；接着，旋转 45 度；最后在 （-25,-25）坐标处绘制一个矩形。最后就会得到在 (-25,-25) 为起始点处，以 (0,0) 为原点旋转 45 度的矩形。

![format_png 2][]

[format_png]: /images/20221124/dc5c578ab98f4a1d85451ef71bb45a7a.png
[format_png 1]: /images/20221124/aa4bd29ad0a44ec5a9eb74fea1c29309.png
[format_png 2]: /images/20221124/75369b2412c34823bc83a56191df49ee.png