如何在對象位於同一位置的同時旋轉畫布對象

Question

我正在創建一個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>

該代碼不起作用，因為它無法加載圖像，因為我已經下載了它，但是現在你們有了代碼，因此您可以看到問題。

Answer 1

看到這個小提琴

的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 個解決方案

解決方案1
1 已采納 2016-06-27 13:26:01

解決方案2
1 2016-06-27 17:03:52

如何在對象位於同一位置的同時旋轉畫布對象

問題描述

2 個解決方案

解決方案1 1 已采納 2016-06-27 13:26:01

解決方案2 1 2016-06-27 17:03:52

解決方案1
1 已采納 2016-06-27 13:26:01

解決方案2
1 2016-06-27 17:03:52