html - 旋转和移动球图像 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画布图像向左旋转向右旋转