1

画像は移動しますが、回転しません。私は移動機能を実装しています。ただし、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>

誰でも私を助けることができます 事前に感謝します

4

2 に答える 2

0

回転変数をインクリメントするのを忘れています:

x += dx;
y += dy;

以下も必要です。

a += da;

ただし、現在の方法で回転させても、画像の中心を中心に回転するわけではないことに注意してください。角を曲がって回転します。行を変更して配置を調整する必要があります。

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

に

ctx.drawImage(ball, -bw/2, -bh/2);
于 2012-12-24T12:20:21.617 に答える