javascript - para - Lienzo HTML: ¿Cómo dibujar una imagen volteada/reflejada?

dibujos faciles

Question

Estoy tratando de voltear / reflejar una imagen mientras la pinto en un lienzo HTML; Encontré un tutorial del juego que muestra una hoja de sprites por dirección a la que debe enfrentarse un personaje, pero esto no me parece del todo correcto :( Especialmente porque cada cuadro tiene un tamaño diferente.

En algunos motores de juego (como cocos2D), recuerdo que usé métodos como "flipX" que simplemente atraen al "jugador" mirando en la dirección opuesta (es mi objetivo, tratar de hacer un juego de plataformas básico).

¿Cuál sería la mejor técnica para alcanzar este objetivo?

Intenté llamar al setScale (-1,1); En mi lienzo sin éxito. Tal vez eso no sea para esto.

Gracias :)

Answer 1

1. Puedes hacer esto transformando el contexto con myContext.scale(-1,1) antes de dibujar tu imagen, sin embargo

2. Esto va a ralentizar tu juego. Es una mejor idea tener un sprite separado, invertido.

Answer 2

Es necesario establecer la escala del lienzo, así como invertir el ancho.

La siguiente función es un extracto de uno de mis proyectos. Cuando se llama a la función, toma un fotograma de la transmisión de una cámara web, se coloca en el lienzo y voltea la imagen horizontalmente.

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

Probablemente haya algunos problemas de rendimiento con esto, pero para mí eso no fue un problema.

Answer 3

No es necesario volver a dibujar toda la imagen al crear un reflejo. Una reflexión original simplemente muestra la parte inferior de la imagen. De esta manera, está redibujando una parte más pequeña de la imagen que proporciona un mejor rendimiento y tampoco necesita crear un degradado lineal para ocultar la parte inferior de la imagen (ya que nunca la dibuja).

 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>