当前位置: 首页 > 文档资料 > HTML5 Canvas 实战 >

4.4 创建镜像变换

优质
小牛编辑
129浏览
2023-12-01

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

镜像变换
图4-6 镜像变换

绘制步骤

按照以下步骤,输出倒置的文本:

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参数赋一个负值,使画布上下文在水平方向上发生翻转。