HTML Canvas: Как нарисовать перевернутое/зеркальное изображение?

Я пытаюсь перевернуть/отразить изображение, рисуя его на холсте HTML; Я нашел учебное пособие по игре, показывающее список спрайтов в каждом направлении, с которым персонаж должен столкнуться, но мне это кажется не совсем правильным. Тем более что каждый кадр имеет разный размер.

Какова будет лучшая техника для достижения этой цели?

Я пытался вызвать setScale(-1, 1); на моем холсте безуспешно. Может быть, это не для этого.

Спасибо

Ответ 1

Вы можете сделать это, изменив контекст с myContext.scale(-1,1) перед тем, как рисовать свое изображение, однако
Это замедлит вашу игру. Это лучшая идея иметь отдельный обратный спрайт.

Ответ 2

Вам нужно установить масштаб холста, а также инвертировать ширину.

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

Вероятно, есть некоторые проблемы с производительностью, но для меня это не было проблемой.

Ответ 3

Вам не нужно перерисовывать изображение целиком при создании отражения. Исходное отражение просто показывает нижнюю часть изображения. Таким образом вы перерисовываете меньшую часть изображения, которая обеспечивает лучшую производительность, а также вам не нужно создавать линейный градиент, чтобы скрыть нижнюю часть изображения (так как вы никогда не рисуете его).

 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>

Ответ 4

Добавьте этот кусок кода перед drawImage. Если вы просто перевернете его горизонтально, он выйдет за границы... Так что также отрегулируйте его положение:

ctx.translate(canvas.width, 0);
ctx.scale(-1, 1);