旋轉並移動球圖像Html 5

Question

現在圖像將被移動但不旋轉。我正在實施移動功能。但只支持IE10。

這是我的腳本，

var ball = new Image; 
window.onload = function() { 
var c = document.getElementsByTagName('canvas')[0]; 
var w = c.width = 800; 
var h = c.height = 600; 
var ctx = c.getContext('2d'); 
var dx = -1, dy = 0; 
var x = 400, y = 200, a = 0; 
var deg2rad = Math.PI/180; 
var da = 10 * deg2rad; 
var bw = ball.width; 
var bh = ball.height; 
setInterval(function() { 
    ctx.clearRect(0, 0, w, h); 
    ctx.translate(x, y); 
    ctx.rotate(a); 
    ctx.drawImage(ball, -bw, -bh); 
    ctx.rotate(-a); 
    ctx.translate(-x, -y); 
    x += dx; 
    y += dy; 
    if ((x - bw < 0) || (x + bw > w)) { 
     dx *= -1; da *= -1; 
    } 
    if ((y - bh < 0) || (y + bh > h)) { 
     dy *= -1; da *= -1; 
    } 
}, 30); 
} 
ball.src = 'images/beachball.png'; 

和，這是我的HTML設計，

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

有人能幫助我在此先感謝

Answer 1

您忘記增加你的旋轉變：

x += dx; 
y += dy; 

也應該有：

a += da; 

但請注意，在你正在做它不會圍繞圖像的中心旋轉的方式旋轉它;它會在角落旋轉。你需要改變這一行來調整佈局：

ctx.drawImage(ball, -bw, -bh); 

到

ctx.drawImage(ball, -bw/2, -bh/2); 

Answer 2

檢查旋轉法...這裏是鏈接到我剛纔回答同樣的問題，

HTML5 canvas image rotate left rotate right