web-dev-qa-db-ja.com

斜めのHTML5キャンバスdrawImage

<canvas>でアニメーションを試していますが、画像を斜めに描く方法がわかりません。望ましい効果は、1つの画像がゆっくり回転する通常のように描画されるいくつかの画像です。 （この画像は、画面の中央にありません。違いがある場合）。

javascripthtml5drawimage
31
Greg

回転させる画像を描画する前に、変換マトリックスを変更する必要があります。

画像がHTMLImageElementオブジェクトを指していると仮定します。

var x = canvas.width / 2;
var y = canvas.height / 2;
var width = image.width;
var height = image.height;

context.translate(x, y);
context.rotate(angleInRadians);
context.drawImage(image, -width / 2, -height / 2, width, height);
context.rotate(-angleInRadians);
context.translate(-x, -y);

X、y座標は、キャンバス上の画像の中心です。

62
Jakub Wieczorek

ユーザーがカスタム回転ポイントのカスタム回転に基づいてX、Y位置に画像をペイントできるようにする関数を作成しました（Jakubの答えに基づいています）。

function rotateAndPaintImage ( context, image, angleInRad , positionX, positionY, axisX, axisY ) {
  context.translate( positionX, positionY );
  context.rotate( angleInRad );
  context.drawImage( image, -axisX, -axisY );
  context.rotate( -angleInRad );
  context.translate( -positionX, -positionY );
}

その後、次のように呼び出すことができます。

var TO_RADIANS = Math.PI/180; 
ctx = document.getElementById("canvasDiv").getContext("2d");
var imgSprite = new Image();
imgSprite.src = "img/Sprite.png";

// rotate 45º image "imgSprite", based on its rotation axis located at x=20,y=30 and draw it on context "ctx" of the canvas on coordinates x=200,y=100
rotateAndPaintImage ( ctx, imgSprite, 45*TO_RADIANS, 200, 100, 20, 30 );
8
Yaume

最初の解決策が非常に多くの人々のために働いたのは興味深いです、それは私が必要とする結果を与えませんでした。結局、私はこれをしなければなりませんでした：

ctx.save();
ctx.translate(positionX, positionY);
ctx.rotate(angle);
ctx.translate(-x,-y);
ctx.drawImage(image,0,0);
ctx.restore();

どこ (positionX, positionY)は、画像を配置するキャンバス上の座標であり、(x, y)は、画像を回転させる画像上のポイントです。

4
PetrolHead