如何在畫布中旋轉一個圖像？
[英]How to rotate one image in a canvas?
問題描述
我正在制作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
}
我希望旋轉此圖像。 旋轉圖像的標准方法是在畫布上下文對象上設置旋轉。 但是，旋轉整個游戲！ 我不想這樣做，只希望旋轉一個精靈。 我怎么做？
6 個解決方案
解決方案1
11 已采納 2011-09-21 08:25:45
使用.save()和.restore() （ 更多信息 ）：
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)
}
解決方案2
5 2011-09-21 08:34:38
您可能需要放置一個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()
}
解決方案3
2 2013-03-06 14:09:40
您最初的“解決方案”是：
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);
解決方案4
2 2011-09-21 09:30:35
在這里，我從自己的一款游戲中取得了一個可行的例子。 您可以從這里獲取圖像。
<!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>
解決方案5
1 2011-09-21 08:59:18
我最終不得不做：
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();
解決方案6
0 2019-10-23 19:05:47
看我的解決方案。 這是完整的示例，最容易理解。
var drawRotate = (clockwise) => {
const degrees = clockwise == true? 90: -90;
let canvas = $('<canvas />')[0];
let img = $(".img-view")[0];
const iw = img.naturalWidth;
const ih = img.naturalHeight;
canvas.width = ih;
canvas.height = iw;
let ctx = canvas.getContext('2d');
if(clockwise){
ctx.translate(ih, 0);
} else {
ctx.translate(0, iw);
}
ctx.rotate(degrees*Math.PI/180);
ctx.drawImage(img, 0, 0);
let rotated = canvas.toDataURL();
img.src = rotated;
}
如何在畫布中旋轉圖像？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.