Introduction de l'article de wulin.com (www.vevb.com): L'application des balises Canvas pour la pratique quotidienne HTML5 - transformation matricielle.
Jusqu'à présent, nous avons appris la technologie de transformation de graphe implémentée en utilisant la transformation des coordonnées. Lorsque la transformation des coordonnées ne peut pas répondre à nos besoins, nous pouvons utiliser la technologie de transformation de la matrice. Ensuite, nous présenterons des techniques de transformation et de déformation de matrice plus complexes.La matrice est utilisée spécifiquement pour atteindre la déformation graphique. Il est utilisé avec des coordonnées pour atteindre le but de la déformation. Lorsque le contexte graphique est créé, une matrice de transformation par défaut est réellement créée. Si cette matrice n'est pas modifiée, la figure dessinée ensuite dessinera la figure avec le coin supérieur gauche de la toile comme origine de coordonnée. La figure dessinée ne sera pas mise à l'échelle et déformée. Cependant, si cette matrice de transformation est modifiée, la situation sera différente.
Méthode de transformation
Les trois méthodes mentionnées dans la section précédente en utilisant la transformation des coordonnées pour la déformation du graphique:
traduire (x, y);
échelle (x, y);
tourner (angle);
Ils peuvent tous être remplacés par la méthode de transformation et les six paramètres dans Context.transform (a, b, c, d, x, y); sont les suivants:
traduire (x, y);
échelle (a, d);
Rotation (b, c); // Cette méthode n'a en fait qu'un seul paramètre. Afin de faciliter la compréhension et correspond à la transformation, les 2 paramètres restants sont utilisés. Je l'ai mis ici pour vous dire que ces deux paramètres sont similaires en fonction et sont liés à la rotation.
Case de code