如何在画布中旋转一个图像？

我正在制作一个HTML5画布游戏，我希望旋转其中一个图像。如何在画布中旋转一个图像？

var link = new Image(); 
link.src='img/link.png'; 
link.onload=function(){ 
    ctx.drawImage(link,x,y,20,20); // draws a chain link or dagger 
}

我想旋转此图像。旋转图像的标准方式是在画布上下文对象上设置旋转。但是，这会旋转整个游戏！我不想这样做，只希望旋转这个精灵。我怎么做？

来源

2011-09-21 Razor Storm

使用.save()和.restore()（more information）：

link.onload=function(){ 
    ctx.save(); // save current state 
    ctx.rotate(Math.PI); // rotate 
    ctx.drawImage(link,x,y,20,20); // draws a chain link or dagger 
    ctx.restore(); // restore original states (no rotation etc) 
}

来源

2011-09-21 08:25:45 pimvdb

酷的感谢！当我正在进行任意角度旋转时，您是否有关于重做图像尺寸的数学知识？ –

@Razor Storm：您需要翻译中点并将其翻译回来，但您已经设法在您发布时这样做了。 – pimvdb

你可能想要把一个translate();那里，因为图像是要围绕原点旋转，那就是在左上角的默认设置，以便您使用translate();更改原点。

link.onload=function(){ 
    ctx.save(); 
    ctx.translate(x, y); // change origin 
    ctx.rotate(Math.PI); 
    ctx.drawImage(link,-10,-10,10,10); 
    ctx.restore() 
}

来源

2011-09-21 08:34:38 Carb0n1c

嗯，位置仍然搞砸 –

好，所以你有一个位置，你想绘制一个图像将是（x，y）。所以你想要做的就是将原点（0，0）转换为位置（x，y），以便位置现在为（0，0），并将原图的右上角绘制成图像。所以如果你的图像是20px高和宽ctx.drawImage（链接，-10，-10,10,10）;你将能够围绕其中心旋转图像。 – Carb0n1c

我最后不得不做的事：

ctx.save(); 
ctx.translate(x,y); 
ctx.rotate(-this.angle + Math.PI/2.0); 
ctx.translate(-x, -y); 
ctx.drawImage(this.daggerImage,x,y,20,20); 
ctx.restore();

来源

2011-09-21 08:59:18

你只需要第一个翻译中的x和y值，你可以删除第二个翻译，并停止将x和y值放在'drawImage（）;'你只是将值加倍，而不是'drawImage（this.daggerImage ，-10，-10,10,10）;'。有关https://developer.mozilla.org/en/Canvas_tutorial/Transformations的更多信息关于这个东西 – Carb0n1c

在这里，我从我的游戏之一制备的工作例子。你可以从Here得到图片。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset=utf-8 /> 
<title>Test</title> 
</head> 
<body> 
<canvas id="canvas" width="100" height="100"></canvas> 
<script type="text/javascript"> 

var ctx = document.getElementById('canvas').getContext('2d'); 
var play = setInterval('Rotate()',16); 
var i = 0; 
var shipImg = new Image(); 
shipImg.src = 'ship.png'; 

function Rotate() { 
    ctx.fillStyle = '#000'; 
    ctx.fillRect(0,0,100,100); 

    ctx.save(); 
    ctx.translate(50, 50); 
    ctx.rotate(i/180/Math.PI); 
    ctx.drawImage(shipImg, -16, -16); 
    ctx.restore(); 
    i += 10; 
}; 

</script> 
</body> 
</html>

来源

2011-09-21 09:30:35 Carb0n1c

你原来的 “解决方案” 是：

ctx.save(); 
ctx.translate(x,y); 
ctx.rotate(-this.angle + Math.PI/2.0); 
ctx.translate(-x, -y); 
ctx.drawImage(this.daggerImage,x,y,20,20); 
ctx.restore();

但是，它可以更有效的（没有save或restore）通过使用此代码：

ctx.translate(x,y); 
ctx.rotate(-this.angle + Math.PI/2.0); 
ctx.drawImage(this.daggerImage,x,y,20,20); 
ctx.rotate(this.angle - Math.PI/2.0); 
ctx.translate(-x, -y);

来源

2013-03-06 14:09:40 Doorknob

如何在画布中旋转一个图像？

回答

相关问题