现在图像将被移动但不会旋转。我正在实现移动功能。但仅支持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>


任何人都可以提前帮助我

最佳答案

您忘记增加旋转变​​量:

x += dx;
y += dy;


还应该具有:

a += da;


注意,尽管按照您的方式旋转它不会围绕图像的中心旋转;它将绕拐角旋转。您需要通过更改以下行来调整展示位置:

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




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

09-17 17:42
查看更多