Toile HTML5 – Mixage d'appels multiples de traduction () et d'échelle ()

Je me demande simplement comment fonctionnent les transformations de Canvas. Disons que j'ai une toile avec un cercle dessiné quelque part à l'intérieur de celui-ci, et je veux étaler le cercle, donc son point central ne bouge pas. J'ai donc pensé à faire ce qui suit:

translate(-circle.x, -circle.y); scale(factor,factor); translate(circle.x,circle.y); // Now, Draw the circle by calling arc() and fill() 

Est-ce la bonne façon de le faire? Je ne comprends pas si la toile a été conçue pour se souvenir de l'ordre que j'appelle les transformations.

Merci.

Oui tu as raison.

La toile accumule toutes les transformations et les applique à tout dessin futur.

Donc, si vous évaluez 2X, votre cercle sera dessiné à 2X … et (!) Chaque tirage au sort sera alors 2X.

C'est là que la sauvegarde du contexte est utile.

Si vous souhaitez agrandir votre cercle en 2X mais que chaque dessin ultérieur soit à 1X normal, vous pouvez utiliser ce modèle.

 // save the current 1X context Context.save(); // move (translate) to where you want your circle's center to be Context.translate(50,50) // scale the context Context.scale(2,2); // draw your circle // note: since we're already translated to your circles center, we draw at [0,0]. Context.arc(0,0,25,0,Math.PI*2,false); // restore the context to it's beginning state: 1X and not-translated Context.restore(); 

Après Context.restore, votre traduction et votre échelle ne s'appliqueront pas à d'autres dessins.