web-dev-qa-db-fra.com

HTML Canvas: Comment dessiner une image retournée/en miroir?

J'essaie d'inverser/refléter une image lorsque je la peint sur un canevas HTML; J'ai trouvé un tutoriel de jeu montrant une feuille de Sprite par direction à laquelle doit faire face un personnage, mais cela ne me semble pas tout à fait correct :( Surtout que chaque image a une taille différente.

Dans certains moteurs de jeu (tels que cocos2D), je me souviens d’avoir utilisé des méthodes telles que "flipX" qui dessinait simplement le "joueur" en regardant dans la direction opposée (c’est ma cible, essayer de créer un jeu de plateforme de base).

Quelle serait la meilleure technique pour atteindre cet objectif?

J'ai essayé d'appeler le setScale (-1,1); sur ma toile sans succès. Peut-être que ce n'est pas fait pour ça.

Merci :)

javascripthtmlcanvasflipmirror
27
Jem

  1. Vous pouvez le faire en transformant le contexte avec myContext.scale(-1,1) avant de dessiner votre image, cependant

  2. Cela va ralentir votre jeu. C'est une meilleure idée d'avoir un Sprite séparé et inversé.

24
Phrogz

Vous devez définir l’échelle de la zone de dessin et inverser la largeur.

La fonction ci-dessous est un extrait d'un de mes projets. Lorsque la fonction est appelée, elle prend un cadre dans un flux webcam, s’installe sur la toile et renverse l’image horizontalement.

drawToCanvas : function(v, context, width, height){
    context.save();
    context.scale(-1,1);
    context.drawImage(v,0,0,width*-1,height);
    context.restore();
}

Cela pose probablement quelques problèmes de performances, mais pour moi ce n’était pas un problème.

20
digitaltag

Vous n'avez pas besoin de redessiner toute l'image lors de la création d'un reflet. Une réflexion originale montre simplement la partie inférieure de l'image. De cette façon, vous redessinez une partie plus petite de l'image qui offre de meilleures performances. De plus, vous n'avez pas besoin de créer de dégradé linéaire pour masquer la partie inférieure de l'image (car vous ne la dessinez jamais).

 var img = new Image();
 img.src = "//vignette2.wikia.nocookie.net/tomandjerryfan/images/9/99/Jerry_Mouse.jpg/revision/latest?cb=20110522075610";
 img.onload = function() {
   var thumbWidth = 250;
   var REFLECTION_HEIGHT = 50;
   var c = document.getElementById("output");
   var ctx = c.getContext("2d");
   var x = 1;
   var y = 1;

	//draw the original image
   ctx.drawImage(img, x, y, thumbWidth, thumbWidth);
	ctx.save();
	//translate to a point from where we want to redraw the new image
   ctx.translate(0, y + thumbWidth + REFLECTION_HEIGHT + 10);
   ctx.scale(1, -1);
   ctx.globalAlpha = 0.25;
   
   //redraw only bottom part of the image
   //g.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
   ctx.drawImage(img, 0, img.height - REFLECTION_HEIGHT, img.width, REFLECTION_HEIGHT, x, y, thumbWidth, REFLECTION_HEIGHT);

   // Revert transform and scale
  ctx.restore();

 };
 body {
   background-color: #FFF;
   text-align: center;
   padding-top: 10px;
 }
<canvas id="output" width="500" height="500"></canvas>

1
jerry