通過JavaScript旋轉每個上下文

Question

image = new Image(); 
image.src = 'assets/img/image.png'; 
for (var i = 0; i < this.bombs.length; i++) { 
    var bomb = this.bombs[i]; 
    ctx.drawImage(image, bomb.x - 2, bomb.y - 2, 15, 8); 

} 

這是我的帆布遊戲中的圖像，從頂部掉下來。但我想，讓圖像隨機隨機每個狀態。

我嘗試這樣做：

function drawRotated(degrees){ 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    ctx.save(); 
    ctx.translate(canvas.width/2,canvas.height/2); 
    ctx.rotate(degrees*Math.PI/180); 
    ctx.drawImage(image,-image.width/2,-image.width/2); 
    ctx.restore(); 
} 

添加了這個功能在我的形象，但它不工作。我該怎麼做？

Answer 1

您正確的道路上！

要旋轉一個（或多個）圖像：

1. 翻譯到您想要爲中心的圖像中心點。
2. 旋轉通過所需角度
3. 畫出圖像
4. 撤消變換（復原翻譯&旋轉）。

一些改動：

• 你總是translate到畫布中央。如果你想讓炸彈落下，你必須越來越多地翻譯畫布。

• 一個錯字：在drawImage你已經使用width兩個寬度&高度參數。

• 效率：context.save and context.restore是更昂貴的操作，因爲它們節省了&恢復所有畫布樣式。相反，它是更有效地與context.setTransform(1,0,0,1,0,0)

這裏是你的代碼重構這些變化僅重置您的變換（平移，旋轉）：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var bomb; 
 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/danger.png"; 
 
function start(){ 
 
    var aa=img.width*img.width; 
 
    var bb=img.height*img.height; 
 
    var cc=Math.sqrt(aa+bb); 
 
    bomb={ 
 
     x:150,y:-img.height/2, 
 
     degrees:0,image:img, 
 
     maxRotatedHalfHeight:cc/2 
 
    }; 
 
    requestAnimationFrame(animate); 
 
} 
 

 
function drawRotated(b){ 
 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
 
    ctx.save(); 
 
    ctx.translate(b.x,b.y); 
 
    ctx.rotate(b.degrees*Math.PI/180); 
 
    ctx.drawImage(b.image,-b.image.width/2,-b.image.height/2); 
 
    ctx.restore(); 
 
} 
 

 
function animate(time){ 
 
    drawRotated(bomb); 
 
    bomb.y+=1; 
 
    bomb.degrees+=1; 
 
    if(bomb.y<=canvas.height+bomb.maxRotatedHalfHeight){ 
 
     requestAnimationFrame(animate); 
 
    }else{ 
 
      alert('Animation is complete.'); 
 
    } 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=175></canvas>