39

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

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

setScale(-1, 1);キャンバス上でを呼び出そうとしましたが、成功しませんでした。多分それはこのためのものではありません。

ありがとう

4

4 に答える 4

35

  1. myContext.scale(-1,1)ただし、画像を描画する前にコンテキストを変換することでこれを行うことができます

  2. これにより、ゲームが遅くなります。別の反転スプライトを用意することをお勧めします。

于 2011-11-17T13:57:07.203 に答える
4

反射を作成するときに、イメージ全体を再描画する必要はありません。元の反射は、単に画像の下部を示しています。このようにして、画像の小さな部分を再描画してパフォーマンスを向上させます。また、画像の下部を非表示にするために線形グラデーションを作成する必要もありません (描画しないため)。

 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>

于 2016-12-14T08:14:13.560 に答える