Comment créer une matrice de transformation en utilisant HTML5 ?

Dans l'article suivant, nous allons apprendre comment créer une matrice de transformation avec HTML5. Le canevas HTML5 fournit des méthodes qui permettent de modifier directement la matrice de transformation. La matrice de transformation doit initialement être la transformation d'identité. être ajusté à l'aide des méthodes de transformation.

Utilisation de la méthode transform()

La matrice de transformation du contexte actuel peut être modifiée à l'aide de laméthode transform()en d'autres termes, la méthode transform() vous permet de redimensionner, faire pivoter, déplacer et incliner le contexte actuel.

Remarque− Seuls les graphiques créés après l'appel de la méthode transform() seront affectés par la transformation.

Grammaire

Voici la syntaxe de la méthode transform()

ctx.transform(m11, m12, m21, m22, dx, dy)

Utilisez la méthode set transform()

La fonction transform(a1, b1, c1, d1, e1, f1) est ensuite appelée avec les mêmes arguments après que la méthode setTransform(a1, b1, c1, d1, e1, f1) réinitialise la transformation actuelle dans la matrice d'identité.

Grammaire

Voici la syntaxe de la méthode set transform().

ctx.setTransform(m11, m12, m21, m22, dx, dy)

Regardons quelques exemples pour mieux comprendre les matrices de transformation en HTML5

Exemple 1

Dans l'exemple suivant, nous utilisons la méthode transform() pour générer un rectangle.

Lorsque le script est exécuté, il générera une sortie affichant un rectangle sur la page Web en déclenchant la méthode de transformation.

Exemple 2

Dans l'exemple ci-dessous, nous avons utilisé les méthodes transform() et set transform().

Lors de l'exécution du script ci-dessus, il générera une sortie générée en utilisant les méthodes transform() et définira les méthodes transform() sur la page Web.

Exemple 3

Dans l'exemple ci-dessous, nous créons une expression mathématique Σ n = 1.

Lorsque l'utilisateur tente d'exécuter le script, il sera affiché via la sortie générée à l'aide des méthodes transform() et set transform() sur la page Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!