HTML5 Canvas实战
4.4 创建镜像变换
阅读(

路径和文本

图形及组合

处理图像和视频

画布变换

平移画布上下文

旋转画布上下文

缩放画布上下文

创建镜像变换

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

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验