html创建镜像网站,4.4 创建镜像变换 - HTML5 Canvas 实战

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

图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标签：

工作原理

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

context.scale(-sx,-sy);

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