javascript - 中心点からの HTML5 回転画像

Question

HTML5 アニメーションを学習しようとしているときに、この問題に遭遇しました。キャンバス上のマウスの位置に基づいて画像を回転しようとすると、回転ポイントが画像の中心ではなく左上隅にあります。

限られた経験から、フラッシュには画像のアンカーポイントを変更するオプションがあり、可能な回転がコーナーではなく中心点を中心に回転することを知っています。読み込まれた画像を中心に回転させることができる JavaScript に似たようなものはありますか?

Answer 1

プロパティを使用して、回転の原点( x, ) を指定できます。ytransform-origin

transform-origin: 50% 50%;

現在のところ、これにはまだベンダープレフィックスが必要です。

-webkit-transform-origin: 50% 50%;
/* and others... */

Answer 2

さて、これは私がそれを機能させる方法です：

アニメーション ループを含む main.js

window.onload = function(){

/*variables*/
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
mouse = utils.captureMouse(canvas),
ship = new Ship();

ship.x = canvas.width / 2;
ship.y = canvas.with / 2;

/*animation loop*/
(function drawFrame(){

    window.requestAnimationFrame(drawFrame, canvas);

    //clear rect tyhjentää koko canvasin
    context.clearRect(0, 0, canvas.width + 1, canvas.height + 1);

    var dx = mouse.x - alus.x,
    dy = mouse.y - alus.y;

    ship.rotation = Math.atan2(dy, dx);
    ship.draw(context);

})();

}

Ship.js

    function Ship(){

    this.x = 0;//x-sjainti
    this.y = 0;//y-sijainti  
    this.rotation = 0;
    this.img = new Image();
    this.img.src = "resources/img/ship2.png";
    this.imgW = this.img.width;
    this.imgH = this.img.height;

}

    Ship.prototype.draw = function(context){

        context.save();

        context.translate(this.x, this.y);
        context.rotate(this.rotation);
        context.drawImage(this.img, this.imgW / 2 * -1, this.imgH / 2 * -1);

        context.restore();

    }

キーポイントはimgWとimgHです。drawImage-method で見られるように、画像が描画される場所は、オブジェクトの寸法の半分に設定されています。これを試してみると、回転ポイントが中心にあるように見えました。