HTML5 Canvas实战
4.5 创建自定义变换
阅读(

路径和文本

图形及组合

处理图像和视频

画布变换

平移画布上下文

旋转画布上下文

缩放画布上下文

创建镜像变换

创建自定义变换

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

自定义变换
图4-7 自定义变换

绘制步骤

按照以下步骤,实现自定义变换:

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);

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验