HTML5 Transformation du canevas

HTML5 Méthodes de transformation du canevas, démonstrations en ligne sur la manière d'utiliser HTML5 Canevas pour effectuer des rotations, des déplacements, des zooms, des rotations autour de points différents, des réglages des proportions de zoom, etc.

Vous pouvez appliquer des transformations à l'HTML5Tout le contenu dessiné sur le canevas. Voici la liste des transformations que vous pouvez appliquer:

• déplacement (déplacer le contenu dessiné)

• Rotation

• d'agrandissement

Dans cet article, nous présentons toutes ces transformations

matrice de transformation

Il est possible de2Définir la matrice de transformation dans le contexte D. Cette matrice sera multipliée par tout le contenu dessiné sur le canevas. Pour les exemples utilisés dans ce tutoriel, je l'ai définie comme une matrice 'identité', qui multiplie les ensembles de coordonnées x, y pour obtenir x, y. Autrement dit, aucune transformation n'est appliquée.
C'est la méthode pour définir la matrice de transformation en tant que matrice unité:

context.setTransform(1,　0,　0,　1,　0,　0);

Déplacement

Vous pouvez appliquer un déplacement à tout ce qui est dessiné sur le canevas. Le déplacement signifie la rélocalisation du contenu dessiné. Voici la manière dont vous définissez le déplacement dans le code :

var　x　=　100;
var　y　=　　50;
context.translate(x,　y);

Ce exemple déplace toutes les formes dessinées sur le canevas sur l'axe x100，dans l'axe y50。
Attention : le déplacement s'applique uniquement aux formes dessinées après l'appel de la fonction translate(). Les formes dessinées avant l'appel de cette fonction ne sont pas affectées.
Voici un autre exemple. Deux rectangles sont dessinés à la même coordonnée, mais un rectangle est dessiné avant l'appel de la fonction translate(), et un autre après

<canvas id="ex1" width="500" height="150" style="border:　1px solide #cccccc;">
　　　　HTML5　Canvas non pris en charge
</canvas>
<script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10,10,　100,　100);
context.translate(50,　25);
context.fillStyle = "#0000ff";
context.fillRect(10,10,　100,　100);
</script>

Voici le résultat lors du dessin sur le canevas:

Rotation

Vous pouvez appliquer une rotation automatique aux éléments dessinés sur HTML5Toute forme dessinée sur le canevas. Cela est réalisé via rotate()2Fonction terminée sur le contexte . Voici un exemple simple:

context.rotate(radians);

L'angle de rotation est passé en paramètre à la fonction rotate(). Cette valeur doit être en radians plutôt qu'en degrés.
Toutes les formes dessinées après la rotation sont dessinées autour du point 0,0 du canevas. C'est le coin supérieur gauche du canevas.
Comme pour le déplacement, la rotation s'applique uniquement aux formes dessinées après l'appel de la fonction rotate().
Voici un exemple où le même rectangle est dessiné avant et après la rotation:

<canvas id="ex2" width="500" height="150" style="border:　1px solide #cccccc;">
　　　　HTML5　Canvas non pris en charge
</canvas>
<script>
　var canvas = document.getElementById("ex2");
var context = canvas.getContext("2d");
　context.fillStyle = "#ff0000";
　context.fillRect(10,10,　100,　100);
　context.rotate(　(Math.PI　/　180)　*　25);　　//tourner　25　degrés.
　context.fillStyle = "#0000ff";
　context.fillRect(10,10,　100,　100);
</script>

Voici l'apparence lors du dessin d'un rectangle sur le canevas:

Tourner autour d'un point différent

Comme mentionné précédemment, toutes les formes tournent autour du coin supérieur gauche du canevas (0,0). Mais que faire si vous souhaitez que la forme tourne autour d'un point différent ? Par exemple, tourner autour de son propre centre ?
Pour faire tourner une forme autour de son propre centre, il faut d'abord déplacer le canevas vers le centre de la forme, puis tourner le canevas, puis déplacer le canevas à nouveau vers 0,0, puis dessiner la forme.
Ceci est un exemple de code qui fait tourner un rectangle bleu autour de son centre:

<canvas id="ex3" width="500" height="150" style="border:　1px solide #cccccc;">
　　　　HTML5　Canvas non pris en charge
</canvas>
<script>
var canvas = document.getElementById("ex3");
var context = canvas.getContext("2d");
var x =　10;
var y =　10;
var width =　100;
var height =　100
var　cx　　　　　=　x　+　0.5　*　largeur;
var　cy　　　　　=　y　+　0.5　*　hauteur;
context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height);
context.translate(cx,　cy);
context.rotate(　(Math.PI　/　180)　*　25);　　//tourner　25　degrés.
context.translate(-cx,　-cy);　//Retournez le centre à 0,0
context.fillStyle = "#0000ff";
context.fillRect(x, y, width, height);
</script>

Voici l'apparence lors du dessin sur le canevas:

Dans cet exemple, le centre du canevas est d'abord déplacé (déplacé) vers le centre du carré (cx, cy). Ensuite, le canevas est tourné25Demi-tour. Puis, il convertit à nouveau le canevas en 0,0. Maintenant, le canevas tourne autour de cx, cy25degrés. Tout ce que vous dessinez sera affiché autour de cx, cy. Finalement, le rectangle est dessiné comme s'il ne s'était rien passé, mais maintenant il tourne autour de cx, cy.25degrés. Cela peut être réalisé uniquement à l'aide d'appels de conversion. Les coordonnées du rectangle restent inchangées. Notez que context.fillRect(), les deux appels pour dessiner les rectangles rouge et bleu sont identiques. C'est l'appel de conversion entre eux qui les fait apparaître à des positions et des angles de rotation différents

d'agrandissement

Il est possible de5Toutes les formes dessinées sur le canevas sont automatiquement réduites.
Lorsque vous agrandissez, vous pouvez agrandir toutes les coordonnées sur les axes x et y à l'aide de certains facteurs. Vous pouvez utiliser la fonction scale() pour définir ces facteurs, comme suit :

var scaleX =　2;
var scaleY =　2;
context.scale(scaleX, scaleY);

Dans cet exemple, toutes les coordonnées sur les axes x et y sont réduites à2fois.
Comme pour translate() et rotate(), le coefficient de zoom ne s'applique qu'aux formes dessinées après l'appel scale().
Voici un autre exemple de code pour dessiner des rectangles rouges et bleus sur le canevas, où le coefficient de zoom s'applique au rectangle bleu :

<canvas id="ex5" width="500" height="250" style="border:　1px solide #cccccc;">
　　　　HTML5　Canvas non pris en charge
</canvas>
<script>
var canvas = document.getElementById("ex5");
var context = canvas.getContext("2d");
var x =　10;
var y =　10;
var width =　100;
var height =　100
context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height);
context.scale(2,2);
context.fillStyle = "#0000ff";
context.fillRect(x, y, width, height);
</script>

Voici les graphics générés sur le canevas :

Veuillez noter que la taille du rectangle bleu est deux fois plus grande que celle du rectangle rouge.
Il faut également noter que la distance entre le coin supérieur gauche du rectangle bleu et le coin supérieur gauche du canevas (0,0) est aussi deux fois plus grande. Toutes les coordonnées sont réduites à deux fois, et le coin supérieur gauche du rectangle est aussi affecté. Pour éviter de déplacer les formes lors de l'agrandissement, il est nécessaire de combiner l'agrandissement avec la translation.

ratio de zoom

Vous pouvez utiliser la fonction de zoom pour réaliser le zoom. Le canvas suivant contient4rectangles. Un champ de saisie se trouve sous le canvas, et vous pouvez l'utiliser pour changer le niveau de zoom (le ratio de zoom).

Niveau de zoom:

Si vous voyez un champ de texte avec une valeur de niveau de zoom, entrez une valeur entre1à10niveau de zoom entre, puis quittez le champ de texte pour voir le résultat. Si vous voyez un curseur, il suffit de déplacer le curseur.

Combinaison de translation, rotation et缩放

Bien sûr, vous pouvez combiner les trois transformations sur le même canvas. Mais, comme pour la combinaison de rotation et de translation, il est important de2L'ordre des appels de fonction dans le contexte D est également important. Si scale() est appelé avant translate() ou d'autres, le résultat peut sembler différent. Vous devrez peut-être ajuster l'ordre des appels pour qu'ils fonctionnent correctement