W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

HTML 游戏旋转



红色方形可以旋转:


旋转组件

在本教程前面,红色方块能够在游戏区内移动,但无法转动或旋转。

要旋转组件,我们必须改变我们绘制组件的方式。

可用于canvas元素的唯一旋转方法将旋转整个画布:

在画布上绘制的其他任何东西也将被旋转,不仅仅是特定的组件。

这就是为什么我们必须在 update() 方法中进行一些更改:

首先,我们保存当前的canvas上下文对象:

ctx.save();

然后,使用translate方法将整个画布移动到特定组件的中心:

ctx.translate(x, y);

然后我们使用rotate()方法执行想要的旋转:

ctx.rotate(angle);

现在我们已经准备好将该组件绘制到画布上,但现在我们将绘制它的中心位置在已翻转(和旋转)画布上的位置0,0:

ctx.fillRect(width / -2, height / -2, width, height);

完成后,我们必须使用还原方法将上下文对象恢复到保存的位置:

ctx.restore();

组件是唯一旋转的东西:


组件构造函数

component 构造函数有一个称为 angle 的新属性,它是表示组件角度的弧度数。

component 构造函数的 update 方法是绘制组件,在这里可以看到允许组件旋转的更改:

Example

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.angle = 0;
    this.x = x;
    this.y = y;
    this.update = function() {
        ctx = myGameArea.context;
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate(this.angle);
        ctx.fillStyle = color;
        ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
        ctx.restore();
    }
}
function updateGameArea() {
    myGameArea.clear();
    myGamePiece.angle += 1 * Math.PI / 180;
    myGamePiece.update();
}
尝试一下 »