游戏轮换

红色方块可以旋转：

旋转部件

在本教程前面的部分，红色方块能够在游戏区域内移动，但不能转动或旋转。

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

画布元素唯一可用的旋转方法是旋转整个画布：

您在画布上绘制的所有其他内容也将旋转，而不仅仅是特定的组件。

这就是为什么我们必须做出一些改变 update() 方法：

首先，我们保存当前画布上下文对象：

ctx.save();

然后我们将整个画布移动到特定组件的中心，使用翻译方法：

ctx.translate(x, y);

然后我们使用 rotate() 方法执行所需的旋转：

ctx.rotate(angle);

现在我们准备将组件绘制到画布上，但是现在我们将在平移（和旋转）画布上将其中心位置绘制在 0,0 处：

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

完成后，我们必须使用 restore 方法将上下文对象恢复到其保存的位置：

ctx.restore();

该组件是唯一旋转的东西：

组件构造函数

这 component 构造函数有一个新属性，名为angle，是表示组件角度的弧度数。

这 update 方法component 构造函数是我们绘制组件的地方，在这里您可以看到允许组件旋转的变化：