4.4 创建镜像变换
优质
小牛编辑
129浏览
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参数赋一个负值,使画布上下文在水平方向上发生翻转。