Question

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

你可以看到地球旋转但它也改变了它的位置。我希望它像css中的旋转关键帧一样旋转。有什么想法吗？

＆＃13;

<!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>

＆＃13;

代码无法正常工作，因为它无法加载图片，因为我已将其下载，但现在您已拥有代码，以便您可以看到问题。

Answer 1

请参阅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(); 
}

Answer 2

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

如果要绘制100或1000的图像（例如游戏），使用保存和恢复可以区分可玩和不可玩。在某些情况下，恢复调用可以将帧速率降低到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);
}

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

2 个答案: