web-dev-qa-db-ja.com

HTMLキャンバス：反転/ミラーリングされた画像を描画する方法は？

画像をHTMLキャンバスにペイントするときに、画像を反転またはミラーしようとしています。キャラクターが向かわなければならない方向ごとのスプライトシートを示すゲームチュートリアルを見つけましたが、これは私にはまったく正しくないようです。特に、フレームごとにサイズが異なります。

この目標を達成するための最良のテクニックは何でしょうか？

キャンバスでsetScale(-1, 1);を呼び出そうとしましたが、成功しませんでした。多分それはこれのために意味されていません。

ありがとう

javascripthtmlcanvasflipmirror
30
Jem

  1. これを行うには、イメージを描画する前に myContext.scale(-1,1) でコンテキストを変換しますが、

  2. これによりゲームの速度が低下します。独立した逆のスプライトを用意することをお勧めします。

29
Phrogz

キャンバスのスケールを設定し、幅を反転させる必要があります。

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

これにはおそらくいくつかのパフォーマンスの問題がありますが、私にとっては問題ではありませんでした。

21
digitaltag

反射を作成するときに画像全体を再描画する必要はありません。オリジナルの反射は、単に画像の下部を示しています。このようにして、より良いパフォーマンスを提供する画像の小さな部分を再描画し、画像の下部を非表示にするために線形グラデーションを作成する必要もありません（描画しないため）。

 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

このコードをdrawImageの前に追加します。水平方向に反転するだけでは境界から外れます... translateを使用して位置を調整します。

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