Comme nous le savons tous, le canevas est un bitmap et vous pouvez y restituer ce que vous voulez, mais vous ne pouvez le modifier qu'en manipulant les propriétés du canevas. C'est-à-dire que vous ne pouvez pas manipuler les éléments dessinés sur la toile. Par exemple, si j'ajoute une peinture à la toile et que je veux maintenant déplacer la peinture de 10 pixels, nous ne pouvons pas manipuler directement la peinture car nous ne pouvons pas du tout obtenir la peinture. .toute information. Tout ce que nous pouvons obtenir, c'est l'objet canevas.
Alors voici la question : comment faire pivoter l’image ?En fait, canvas fournit diverses interfaces pour contrôler le canevas. Il existe une méthode rotate() pour la rotation.
En fait, la rotation ici ne fait pas vraiment pivoter le canevas. Par exemple, mon ctx.rotate(Math.PI/2) pivote de 90°. Cela ne signifie pas que nous verrons la toile pivotée de 90° sur la page. Nous pouvons comprendre que le canevas se compose en fait de deux parties, l'une est le canevas visible à l'œil nu et l'autre est le canevas virtuel utilisé pour les opérations. Toutes nos actions sur le canevas virtuel seront mappées sur le canevas réel.
Cela peut être difficile à comprendre, alors utilisons une image pour l’expliquer. Tout d'abord, introduisons la méthode rotate(). Elle peut faire pivoter le canevas et faire pivoter l'origine du canevas. L'origine du canevas est le coin supérieur gauche par défaut.
Jetons un coup d'œil à l'effet d'une rotation de 45° :
Ici, nous pouvons voir que la toile virtuelle que je viens de mentionner est pivotée de 45°, puis une image est insérée dans la toile virtuelle. Ensuite, ce que la toile réelle présente est l'intersection de la toile virtuelle et de la toile réelle. Ce n’est peut-être pas facile à comprendre ici, réfléchissez-y attentivement.
Le code des deux images est le suivant :
// Non tourné var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.drawImage(img, 0, 0)// Rotation dans le sens inverse des aiguilles d'une montre 45° var img = document.getElementById('img')var toile = document.getElementById('canvas')var ctx = toile.getContext(2d)ctx.rotate(-Math.PI / 4);ctx.drawImage(img, 0, 0)En voyant cela, je pense que tout le monde sait comment utiliser rotate().
Parlons de la façon de faire pivoter le centre de l'image
Laissez-moi vous expliquer comment utiliser les deux autres méthodes de canevas :
ctx.translate(x, y) : Cette méthode est une méthode qui peut déplacer l'origine du canevas. Les paramètres sont x et y ;
ctx.drawImage(img, x, y) : Cette méthode a été utilisée ci-dessus, mais elle a trois paramètres. Le premier est le dom de l'image à insérer, et les deux suivants x et y sont les paramètres pour img when. insertion de l'image. L'emplacement est modifié.
Comme le montre l'image, si vous souhaitez effectuer une rotation de 45° autour du centre de l'image, vous devez déplacer l'origine de la toile au centre de l'image, puis faire pivoter la toile, puis lors de l'insertion de l'image, traduisez l'image dans le coin supérieur gauche de la moitié de l'image elle-même.
Il y a trois étapes ici :
Jetons un coup d'œil à ces trois étapes séparément (la largeur et la hauteur de l'image sont de 400 et 300)
Déplacer l'origine du canevas
var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150)ctx.drawImage(img, 0, 0)Faire pivoter la toile
var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150)ctx.rotate(-Math.PI / 4) ctx.drawImage(img, 0, 0)Insérer une image et déplacer
var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150)ctx.rotate(-Math.PI / 4) ctx.drawImage(img, -200, -150)Ça y est tu as fini
ps : Après avoir réalisé une série d'actions, chacun doit faire pivoter l'origine de la toile pour la restaurer. Sinon, après une série d'opérations, les paramètres du canevas seront perturbés. Restaurez simplement les paramètres à leur état d'origine après chaque opération.
var img = document.getElementById('img')var canvas = document.getElementById('canvas')var ctx = canvas.getContext(2d)ctx.translate(200, 150) // 1ctx.rotate(-Math.PI / 4) // 2ctx.drawImage(img, -200, -150)// Restaurer les paramètres (les étapes à restaurer doivent être inversées par rapport aux étapes que vous avez modifiées) ctx.rotate(Math.PI / 4) // 1ctx.translate(-200, -150) // 2// Après cela, l'origine du le canevas revient à l'angle supérieur gauche, l'angle de rotation est 0//Autres opérations...Une autre chose à noter est que ce que je viens de démontrer est un exemple où l'axe x et l'axe y de l'image par rapport au canevas sont 0. Si ce n'est pas 0, déplacez simplement l'origine ctx.translate(200+x, 150 + ans). Les 200 et 150 représentent ici la moitié de la largeur et de la hauteur de l'image, et x et y sont les x et y de l'image par rapport à la toile.
Cet article ne parle que de la rotation au centre de l'image. Plus tard, j'écrirai sur la rotation et la mise à l'échelle de l'image. S'il y a quelque chose de mal écrit ou d'incorrect, veuillez le signaler.
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.