4.5 创建自定义变换

优质

小牛编辑

133浏览

2023-12-01

如果你想实现自定义变换，而不是平移、缩放、旋转。HTML5画布API也提供了这样的方法，允许我们自定义一个可应用于当前上下文的变换矩阵。本节，我们将手动创建一个平移变换，来演示transform()方法的工作原理。

绘制步骤

按照以下步骤，实现自定义变换：

1. 定义画布上下文，及矩形的尺寸：

window.onload = function(){
  var canvas  = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  var rectWidth  =  150;
  var rectHeight =  75;

2. 通过手动平移画布上下文，来应用自定义变换：

  //平移矩阵
  //   1   0   tx
  //   0   1   ty
  //   0   0   1
  var tx  = canvas.width  /  2; 
  var ty  = canvas.height  /  2;
  //应用自定义变换
  context.transform(1,  0,  0,  1, tx, ty);

3. 绘制该矩形：

  context.fillStyle  = "blue";
  context.fillRect(-rectWidth  /  2,  -rectHeight  /  2, rectWidth, rectHeight);
};

4. 在HTML文档的body部分嵌入canvas标签：

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

本节，通过为上下文状态应用自定义的平移变换矩阵，我们创建了一个自定义的平移变换。变换矩阵是一个简单的二维矩阵，用于把当前矩阵变换为一个新的矩阵。使用画布上下文对象的transform()方法，可以把自定义变换应用于上下文状态：

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

其中，参数a, b, c, d, e, f对应于下面的变换矩阵的分量：

这里的x' 和y' 是应用变换后的新矩阵的x和y分量。平移的变换矩阵如下所示：

其中，tx是水平方向上平移的距离，ty是垂直方向上平移的距离。

了解更多

把变换矩阵应用于当前上下文状态，除了transform()方法，我们也可以使用画布上下文对象的setTransform()方法来设置变换矩阵：

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

如果你想把一个现有的矩阵，直接设置为当前上下文的变换矩阵，而不是通过一系列矩阵变换来得到相同的结果，该方法非常有用。