4.4 创建镜像变换

优质

小牛编辑

127浏览

2023-12-01

缩放变换的另一个有趣的应用是，使画布上下文在垂直方向或水平方向上发生翻转的能力。本节，我们将使画布上下文在水平方向上产生镜像，并输出倒置的文本。

按照以下步骤，输出倒置的文本：

1. 定义画布上下文：

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

2. 平移画布上下文，然后使用一个负的x值，使画布上下文在水平方向上发生翻转：

  //把上下文平移到画布的中央
  context.translate(canvas.width  /  2, canvas.height  /  2);
  //在水平方向上翻转上下文
  context.scale(-1,  1);

3. 输出"Hello World!"：

  context.font  = "30pt Calibri";
  context.textAlign  = "center";
  context.fillStyle  = "blue";
  context.fillText("Hello World!",  0,  0);
};

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

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

要使用HTML5的画布API创建镜像变换，在调用画布上下文对象的scale()方法时，可以给sx或sy赋一个负值：

context.scale(-sx,-sy);

本节，我们把画布上下文平移的画布的中央，然后在调用scale()方法时，为sx参数赋一个负值，使画布上下文在水平方向上发生翻转。