javascript - HTML5 从中心点旋转图像

Question

在尝试学习一些 HTML5 动画时，我遇到了这个问题：尝试根据画布上的鼠标位置旋转图像时，旋转点位于左上角而不是图像中心。

根据有限的经验，我知道在 Flash 中有一个选项可以更改图像的锚点，因此可能的旋转围绕中心点而不是某个角落旋转。JavaScript中是否有类似的东西可以让我围绕它的中心旋转加载的图像？

Answer 1

您可以使用以下属性指定旋转的 ( x, y) 原点：transform-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 方法中所见，绘制图像的位置设置为对象向后尺寸的一半。尝试后，这似乎使旋转点居中。