首页 理论教育HTML5实战宝典:矩阵变换与坐标关系

HTML5实战宝典:矩阵变换与坐标关系

【摘要】:而在图形图像学中,矩阵转换一般是用来表示图形的变换,如平移、旋转、缩放和斜切。而这些变化全部都是基于矩阵变换计算而出的。但是矩阵运算比较复杂,Canvas已经把相应的变换封装成函数,我们可以直接使用从而简化了我们的工作。它以下面描述的矩阵来操作当前的变换矩阵:transform()允许缩放、旋转、移动并倾斜当前的环境。绘制一个矩形,通过setTransform()重置并创建新的变换矩阵,再次绘制矩形,重置并创建新的变换矩阵,然后再次绘制矩形。

所谓的矩阵转换是线性代数中的一个概念。在线性代数中,线性变换能够用矩阵表示。而在图形图像学中,矩阵转换一般是用来表示图形的变换,如平移、旋转、缩放和斜切。而这些变化全部都是基于矩阵变换计算而出的。但是矩阵运算比较复杂,Canvas已经把相应的变换封装成函数,我们可以直接使用从而简化了我们的工作。Canvas里面的变换包括平移、旋转、缩放如表7-20~表7-25所示。

转换

表7-20

978-7-111-55813-2-Chapter07-113.jpg

缩放

定义和用法:

scale()方法缩放当前绘图,更大或更小。

JavaScript语法如下:

978-7-111-55813-2-Chapter07-114.jpg

表7-21

978-7-111-55813-2-Chapter07-115.jpg

旋转

定义和用法:

rotate()方法旋转当前的绘图。

JavaScript语法如下:

978-7-111-55813-2-Chapter07-116.jpg

表7-22

978-7-111-55813-2-Chapter07-117.jpg

平移

定义和用法

translate()方法重新移动绘图x轴或y轴位置。

JavaScript语法如下:(www.chuimin.cn)

978-7-111-55813-2-Chapter07-118.jpg

表7-23

978-7-111-55813-2-Chapter07-119.jpg

矩阵转换

定义和用法:

画布上的每个对象都拥有一个当前的变换矩阵。

transform()方法替换当前的变换矩阵。它以下面描述的矩阵来操作当前的变换矩阵:

978-7-111-55813-2-Chapter07-120.jpg

transform()允许缩放、旋转、移动并倾斜当前的环境

JavaScript语法如下:

978-7-111-55813-2-Chapter07-121.jpg

表7-24

978-7-111-55813-2-Chapter07-122.jpg

定义和用法:

画布上的每个对象都拥有一个当前的变换矩阵。

setTransform()方法把当前的变换矩阵重置为单位矩阵,然后以相同的参数运行transform()。

绘制一个矩形,通过setTransform()重置并创建新的变换矩阵,再次绘制矩形,重置并创建新的变换矩阵,然后再次绘制矩形。

JavaScript语法如下:

978-7-111-55813-2-Chapter07-123.jpg

表7-25

978-7-111-55813-2-Chapter07-124.jpg