Html5 Canvas Preliminary Study Notes (6) -Transformation

In html5, a variety of graphic transformations including translation, scaling and rotation can be achieved. There are two methods, namely the matrix method and the function method. The following describes how translation, scaling and rotation can be implemented using these two methods.

1. Panning:

 context.fillRect(50,50,50,50);
 context.translate(100,100);
 context.fillRect(50,50,50,50);

If there is no middle sentence, the effect you will see will be only one rectangle, because the first rectangle and the second rectangle overlap, now The effect is to pan, and the effect is as follows:

First of all, the methods introduced in this article are all state values, and That is to say, its scope will affect all the code below it, and you can also use save and restore to store and pop up state. The above introduction is to call the function to solve the translation problem. The matrix method is introduced below. We can use the #transform method of context to do it. The matrix change operation has six parameters. Some explanations like to interpret them as responsible for different operations. I prefer to introduce these six parameters as a whole, which means that these parameters are responsible for translation, scaling and rotation respectively. Different, first introduce the whole. Overall, the first four parameters are responsible for scaling and rotation, the last two parameters are translation, the first four parameters are 1, 4 is a group, 2, 3 is a group, 1 and 2 are the values ​​of x, 3 and 4 is the value of y, 5 and 6 are the translations of x, y respectively. If the above code uses a matrix, it should be written as follows:

context.fillRect(50,50,50,50);
context.transform(1,0,0,1,100,100);
//context.transform(0,1,1,0,100,100);
context.fillRect(50,50,50,50);

Here is the first The second sentence of code has the same meaning as the code commented out in the third sentence. The reason why it should be in the group of 1, 4 is the same as 2, 3 is written 1 in one of these groups because we want to ensure a rectangular shape It is not scaled. If it is 0, the size will be scaled to 0.

2. Scaling

 context.fillRect(50,50,50,50);
 context.translate(150,50);
 context.scale(0.5,0.5);
 context.fillRect(0,0,50,50);

Both scaling and rotation require translation. This is because there will be problems if we write the following code

context.fillRect(50,50,50,50);
 context.scale(0.5,0.5);
 context.fillRect(150,50,50,50);

This code It seems to be the same as the code above, but it is actually different, because when you call context.scale, all coordinates will be scaled to half of the original size, so the effect will be the same as the following Different

The following is a comparison between the first and second paragraphs of code:

It can be seen that the latter picture is misaligned.

The matrix method is introduced below:

context.fillRect(50,50,50,50);
context.transform(0,0.5,0.5,0,150,50);
//context.transform(0.5,0,0,0.5,150,50);
context.fillRect(0,0,50,50);

The same as above, the effect of commenting out the code is the same, the same, it also needs to be translated first, the same, the first parameter and the fourth parameter The first parameter group is the same as the second and third parameter group.

3. Rotation

context.fillRect(50,50,50,50);
 context.translate(150,50);
 context.rotate(Math.PI/4);
 context.fillRect(0,0,50,50);

The following code can achieve rotation. For the same reason, it also needs to be translated first. The angle of rotation uses the radian system. The effect is as follows:

下面介绍的是使用矩阵法：

context.fillRect(50,50,50,50);
context.transform(Math.cos(Math.PI/4),Math.sin(Math.PI/4),-Math.sin(Math.PI/4),Math.cos(Math.PI/4),150,50);
//context.transform(-Math.sin(Math.PI/4),Math.cos(Math.PI/4),Math.cos(Math.PI/4)
//,Math.sin(Math.PI/4),150,50);
context.fillRect(0,0,50,50);

两组参数分别为cos旋转角，sin旋转角，负的sin旋转角，cos旋转角，或者为负的sin旋转角，cos旋转角，cos旋转角，sin旋转角。

如有错误，希望大家多多指正

 以上就是Html5 Canvas初探学习笔记(6) -变换的内容，更多相关内容请关注PHP中文网（www.php.cn）！