HTML5画布控件图形矩阵转换方法的深入分析

在引入矩阵变换（）之前，我们先说明变换矩阵是什么。
以上是对变换相应的变换矩阵（）方法在画布上。这种方法是完全六参数中输入图中所示，具体context.transform（A，B，C，D，E，F）。

每个参数的含义对应于下表：

参数
意义
一
水平缩放（1）
B
水平倾斜（0）
C
垂直倾斜（0）
D
垂直标度（1）
E
水平位移（0）
F
垂直位移（0）
当我们把相应的0或1的矩阵，可以发现这是一个单位矩阵（水平和垂直缩放，默认值是1，占比例的1倍，即无标度），使用一种新的变换矩阵和电流变换矩阵乘法操作，然后各种变化的效果。

这里是一个简短的介绍。当我们想变换一个图时，只要我们操作变换矩阵的相应参数，我们就可以通过这个图的每个定点的坐标乘以新点的坐标。

变换（）方法

在画布绘制中，我们给出了一种改变变换矩阵的方法，即变换（）。

默认的坐标系的坐标原点（0, 0）在画布的左上角，右X值越大，更大的值Y轴。默认的坐标系中，各点坐标直接映射到一个CSS像素。默认的坐标系统是用于一些具体的操作和属性在画布上。然而，除了默认的坐标系统，每个帆布还具有一个电流变换距离矩阵作为图形状态的一部分。矩阵定义了当前画布坐标系统。当一个点的坐标是指定的，大部分的帆布地图上的操作，当前坐标系统，而不是默认的坐标当前转换矩阵是用于将指定坐标转换为默认坐标系的等效坐标。坐标变换也影响到文本和线段的绘制。

调用转换（）方法只需将坐标的原点向上、向下、向左和右移动。
旋转（）方法将按指定的角度顺时针旋转。
该方法实现了x轴与Y轴之间距离的延长和缩短，实现了传递负值。

刻度由坐标的参考点转动坐标轴，它就像镜子中的镜子。
平移用来将坐标原点移到画布的左下角。然后用刻度法把Y轴转动，这样y轴越大，它就越大。

坐标变换是从数学观点理解的。
翻译，旋转和尺度的方法可以通过想象一对坐标轴的转换容易理解。从代数的观点，这是很容易理解的坐标变换，即变换转化为变革中的坐标点（x，y），和原来的坐标系统成为（X `，Y `）。
电话c.translate（DX，Dy）。该方法等价于下面的表达式
复制代码代码如下所示：
在新系统的0中，在原有的系统中是
y＝y；
C.scale（SX，SY）；
X ` = SX××；
y =系统；
c.rotate（）
x = x（*）；
y = y（…）；

建议在使用转换（）时，可以在下列情况下使用：

1。使用context.transform（1,0,0,1，dx，dy）而不是context.translate（DX，Dy）
2。使用context.transform（SX，0,0，SY，0,0）而不是context.scale（SX，SY）
三.使用context.transform（0，B，C，0,0,0）实现斜效果（最实用的）。
没有更多的使用它来实现旋转，也不需要记住所有这些结论，直接注意ABCDEF这六个参数的意义，效果是一样的。

现在让我们来看一个熟悉的代码：

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。

矩阵变换

体{背景：URL（， /图像/ BG3 .webp）重复；}
#帆布{ border: 1px solid # aaaaaa；显示：块；保证金：50px汽车；}
你的浏览器不支持画布让我们换一个！

在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；
context.fillstyle =# FFF；
（00800600）context.fillrect；

context.fillstyle =黄色；
context.strokestyle =# 00aaaa ；
context.linewidth = 5；

context.save（）；
向（300200）转换
context.transform（1,0,01300200）；
水平方向放大2倍，垂直方向放大1.5倍。
context.transform（2,0,0,1.5,0,0）；
水平宽度为10%°/右倾斜距离，垂直向上倾斜高度距离为10%。
context.transform（1，- 0.1,0.1,1,0,0）；
（00200200）context.fillrect；
（00200200）context.strokerect；
context.restore（）；
}；

运行结果：
settransform（）方法
该变换的行为（）方法是相对的，是由其他变换旋转（），规模（），（），或转换（翻译）。例如，如果我们设置绘图两倍，变换（）方法将放大绘制两次，那么我们的图纸扩大四倍。这是改造前相同。

但settransform（）不作为与其他变换。它的参数也是六，context.settransform（A，B，C，D，E，F），作为变换相同的（）。

这里我们举例说明：
画一个矩形，重置它的settransform（），创建新的变换矩阵，绘制矩形，复位和创建新的变换矩阵，然后再绘制矩形。

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。

矩阵变换

体{背景：URL（， /图像/ BG3 .webp）重复；}
#帆布{ border: 1px solid # aaaaaa；显示：块；保证金：50px汽车；}
你的浏览器不支持画布让我们换一个！

在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；
context.fillstyle =# FFF；
（00800600）context.fillrect；

背景。fillStyle =黄色；
（200100250100）context.fillrect

context.settransform（为1、0.5、- 0.5,1,30,10）；
背景。fillStyle =红色；
（200100250100）context.fillrect；

context.settransform（为1、0.5、- 0.5,1,30,10）；
背景。fillStyle =蓝色；
（200100250100）context.fillrect；
}；

运行结果：
解释的过程：我们称settransform每当（），它将重置以前的变换矩阵和建立新的矩阵，所以在下面的例子中，红色的矩形将不会出现，因为它是蓝色的长方形下。