Notes d'étude préliminaires de Html5 Canvas (6) -Transformation

Dans html5, diverses transformations graphiques, notamment la traduction, la mise à l'échelle et la rotation, peuvent être réalisées. Il existe deux méthodes, à savoir la méthode matricielle et la méthode fonctionnelle. Ce qui suit décrit comment la translation, la mise à l'échelle et la rotation peuvent être mises en œuvre à l'aide de ces deux méthodes.

1. Traduction :

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

S'il n'y a pas de phrase du milieu, l'effet que vous verrez sera un seul rectangle, car le premier rectangle et le deuxième rectangle se chevauchent, l'effet actuel est la traduction, l'effet est le suivant :

Tout d'abord, les méthodes présentées dans cet article sont toutes les valeurs d'état, c'est-à-dire que sa portée affectera tout le code en dessous. Vous pouvez également utiliser save et restore pour stocker et. état contextuel. Ce qui précède décrit l'appel de fonctions pour résoudre le problème de traduction. La méthode matricielle est présentée ci-dessous. Nous pouvons utiliser la méthode transform de context. L'opération de changement de matrice comporte six paramètres. Certaines explications aiment les interpréter comme responsables de différentes opérations. Je préfère introduire ces six paramètres dans leur ensemble, ce qui signifie que ces paramètres sont respectivement responsables de la translation, de la mise à l'échelle et de la rotation. l'ensemble. Dans l'ensemble, les quatre premiers paramètres sont responsables de la mise à l'échelle et de la rotation, les deux derniers paramètres sont la traduction, les quatre premiers paramètres 1, 4 est un groupe, 2, 3 est un groupe, 1 et 2 sont des valeurs x, 3 et 4 est la valeur de y, 5 et 6 sont les traductions de x, y respectivement. Si le code ci-dessus utilise une matrice, il doit être écrit comme suit :

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);

<. 🎜> La deuxième phrase du code ici a la même signification que le code commenté dans la troisième phrase. La raison pour laquelle il devrait être dans le groupe de

1, 4. et 2, 3Dans ce groupe, écrivez 1 parce que nous Pour nous assurer que le rectangle n'est pas mis à l'échelle, s'il est 0, la taille sera mise à l'échelle à 0.

2. Zoom

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

La mise à l'échelle et la rotation nécessitent une traduction En effet, si nous écrivons le code suivant, il y aura des problèmes

< 🎜. >Ce code semble être le même que le code ci-dessus, mais il est en fait différent, car lorsque vous appelez

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

context.scale

, toutes les coordonnées seront mises à l'échelle à la moitié de la taille d'origine, donc il sera différent de l'effet ci-dessous Ce qui suit est une comparaison entre le premier et le deuxième paragraphes du code :

On peut voir que cette dernière image est mal alignée.

La méthode matricielle est présentée ci-dessous :

Identique à ci-dessus, l'effet de la mise en commentaire du code est le même. De même, il doit également être traduit en premier. premier paramètre et le quatrième groupe de paramètres est le même que les deuxième et troisième groupes de paramètres.

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);

3. Rotation

Le code suivant peut réaliser une rotation Pour la même raison, il doit également être traduit en premier. L'angle de rotation est en radians. suit :

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

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

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）！