html5图片绕中心旋转,HTML5从中心点旋转图像

好吧，这是怎么我设法让它起作用：

包含动画循环的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所示，图像的绘制位置设置为对象向后尺寸的一半。尝试后，这似乎已经集中了旋转点。