Как повернуть одно изображение на холсте? - PullRequest
Новая
       15

Как повернуть одно изображение на холсте?

6 голосов
/ 21 сентября 2011

Я делаю игру на холсте 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
}

Я хочу повернуть это изображение. Стандартный способ поворота изображения состоял в том, чтобы установить вращение на объекте контекста холста. Тем не менее, это вращает всю игру! Я не хочу этого делать, а хочу только вращать этот спрайт. Как мне это сделать?

Ответы [ 5 ]

11 голосов
/ 21 сентября 2011

Используйте .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)
}
5 голосов
/ 21 сентября 2011

Возможно, вы захотите поместить туда 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()
}
2 голосов
/ 06 марта 2013

Ваше первоначальное «решение» было: 

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);
2 голосов
/ 21 сентября 2011

Здесь я сделал рабочий пример из одной из моих игр.Вы можете получить изображение из Здесь . 

<!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>
1 голос
/ 21 сентября 2011

Мне пришлось сделать: 

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();
...