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

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

в некоторых игровых движках (например, cocos2D) я помню, что использовал такие методы, как "flipX" , которые просто рисовали "игрока", глядя в противоположном направлении (это моя цель, пытаясь сделать некоторые основные platformer).

Что бы быть лучший способ для вас, чтобы достичь этой цели?

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

спасибо :)

25
canvas flip html javascript mirror

3 ответов

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

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

22

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

приведенная ниже функция является выдержкой из одного из моих проектов. Когда функция вызывается, она берет кадр из веб-камеры, помещает на холст и переворачивает изображение по горизонтали.

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

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

18

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

 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