[英]Rotate image on HTML5 Canvas
我有一个图像,我需要旋转一个角度,然后在某个点将其绘制到画布上。 我目前有这个:
var image = roach.image;
image.style.msTransform = 'rotate(' + roach.heading + 'deg)';
this.gameContext.drawImage(image, roach.position.x, roach.position.y);
我如何编辑它以使其工作,其中roach.heading是我想将其旋转至度的角度。
尝试这个:
var image = roach.image,
ctx = this.gameContext,
widthHalf = Math.floor( image.width / 2 ),
heightHalf = Math.floor( image.height / 2 );
ctx.save();
ctx.translate( roach.position.x, roach.position.y );
ctx.translate( widthHalf, heightHalf );
ctx.rotate( ( Math.PI / 180 ) * roach.heading );
ctx.drawImage( image, -widthHalf, -heightHalf );
ctx.restore();
jsfiddle: http : //jsfiddle.net/PwzEc/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.