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方法中所示，绘制图像的位置设置为对象向后尺寸的一半。在尝试之后，似乎将旋转点集中在一起。

HTML5从中心点旋转图像

2 个答案: