如何在对象停留在同一位置时旋转画布对象答案

【问题标题】：How to rotate an canvas object while the object stays on the same place如何在对象停留在同一位置时旋转画布对象
【发布时间】：2016-10-29 11:19:57
【问题描述】：

我正在创建一个 Javascript 游戏。这是关于一个站在世界之巅的人。我已经有了一个地球，现在我需要旋转它，但是当我旋转它时，它也会改变它的位置。

正如您所见，地球在旋转，但它也改变了它的位置。我希望它像从 css 中旋转关键帧一样旋转。有什么想法吗？

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="Style.css"/>
</head>
<body onload="draw()">
    <canvas id="canvas"></canvas>
</body>
<script>
var ctx = document.getElementById("canvas").getContext('2d');
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
    
setInterval(draw, 10);
function draw() {
    var img = new Image();
    img.onload = function(){
    ctx.rotate(1*Math.PI/180);
    ctx.drawImage(img,canvas.width/2-200,canvas.height/2-100,300,300);
  };
  img.src = "earth.png";
}
</script>
</html>

代码不起作用，因为它无法加载图像，因为我已经下载了它，但现在你们有了代码，所以你可以看到问题。

【问题讨论】：

代码？它可能是围绕原点而不是围绕它自己的中心旋转。
我更新了它@Arg0n

标签： javascript html canvas rotation

【解决方案1】：

避免使用保存和恢复的更快方法。

如果您要绘制 100 或 1000 幅图像（例如用于游戏），则使用保存和恢复可以区分可玩和不可玩。在某些情况下，restore 调用可能会将帧速率从 60fps 降至 10fps 以下。

使用保存和恢复时请务必小心，确保保存时没有大图案或过滤器（如果支持）、复杂渐变或详细字体。如果你打算做很多，最好在保存和恢复之前删除这些东西

对于单张图片没关系，前面的答案是最好的解决方案。

具有缩放旋转和淡化的通用精灵渲染

// draws a image centered at x,y scaled by sx,sy rotate (r in radians) and faded by alpha (0-1)and 

    function drawImage(image,x,y,sx,sy,r,alpha){ // 
        ctx.setTransform(sx,0,0,sy,x,y);
        ctx.rotate(r);
        ctx.globalAlpha = alpha;
        ctx.drawImage(image,-image.width/2,-image.height/2);
    }

不褪色

    function drawImage(image,x,y,sx,sy,r){ // 
        ctx.setTransform(sx,0,0,sy,x,y);
        ctx.rotate(r);
        ctx.drawImage(image,-image.width/2,-image.height/2);
    }

或者如果您想在调用后进行默认转换

    function drawImage(image,x,y,sx,sy,r){ // 
        ctx.setTransform(sx,0,0,sy,x,y);
        ctx.rotate(r);
        ctx.drawImage(image,-image.width/2,-image.height/2);
        ctx.setTransform(1,0,0,1,0,0);
    }

由于您可能希望连续渲染许多图像，您可以使用以下方法恢复画布上下文

function restoreContext(){
    ctx.globalAlpha = 1;
    ctx.setTransform(1,0,0,1,0,0);
}

【讨论】：

谢谢，这很有用。
@MartijnVenvande 我刚刚为非常相似的问题写了一个更详细的答案，您可能会发现它也很有用stackoverflow.com/a/38079796/3877726

【解决方案2】：

见this小提琴

HTML

<canvas id="canvas"></canvas>

JavaScript

var ctx = document.getElementById("canvas").getContext('2d');
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var img;

function draw() {
  img = new Image();
  img.onload = function(){
    setInterval(rotate, 10);
  };
  img.src = "https://pixabay.com/static/uploads/photo/2013/07/12/13/55/earth-147591_960_720.png";
}

draw();

var i = 0;
function rotate() {
  i += 1;
  drawRotatedImage(img, 100, 100, 200, 200, i);
}

var TO_RADIANS = Math.PI/180; 
function drawRotatedImage(image, x, y, width, height, angle) { 
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(angle * TO_RADIANS);
  ctx.drawImage(image, -width/2, -height/2, width, height);
  ctx.restore(); 
}

【讨论】：

@MartijnVenvande 没问题，享受 :)