上一节:
下一节:

  HTML 游戏旋转

  • 定义和使用

    点击下面按钮红色方块可以旋转：

  • 旋转组件

    在本教程的前面，红色方块可以在游戏区移动，但不能旋转或旋转。
    要旋转组件，我们必须改变绘制组件的方式。
    画布元素唯一可用的旋转方法将旋转整个画布：
    rotate1
    在画布上绘制的其他所有内容也将被旋转，而不仅仅是特定的组件。
    这就是为什么我们必须对 update() 方法进行一些更改：
    首先，保存当前画布上下文对象：
    ctx.save()
    然后，我们使用translate方法将整个画布移动到特定组件的中心：
    ctx.translate(x, y)
    然后我们使用 rotate() 方法执行所需的旋转：
    ctx.rotate(angle)
    现在我们已经准备好将组件绘制到画布上，但是现在我们将在平移（和旋转）画布上的位置 0,0 处绘制组件：
    ctx.fillRect(width / -2, height / -2, width, height)
    完成后，必须使用 restore 方法将上下文对象恢复到其保存的位置：
    ctx.restore()
    组件是唯一旋转的对象：

  • 组件构造函数

    组件构造函数有一个名为angle的新属性，它是表示组件角度的弧度数。
    组件构造函数的更新方法是绘制组件，在这里您可以看到允许组件旋转的更改： 
    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();
}
    尝试一下
上一节:
下一节: