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

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

29 голосов
/ 17 ноября 2011

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

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

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

Спасибо

Ответы [ 3 ]

28 голосов
/ 17 ноября 2011

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

  2. Это будет медленновниз по вашей игре.Лучше иметь отдельный обратный спрайт.

20 голосов
/ 17 июня 2014

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

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

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

1 голос
/ 14 декабря 2016

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

 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>
...