HTML5 Canvas - 第 2 部分：状态

改变画布的状态

改变画布的状态

在第一部分中，我们已经看到每次循环都绘制相同的帧是多么乏味。
这次，我们将探讨如何将这个静态的黑色矩形变成一个可爱的动态黑色矩形。

转换

还记得我们之前看到过，路径可以存储在变量中以便重复使用吗？
不过，它有一个小小的缺陷：之后就无法更改它的位置了。

如果不能改变路径位置，那就改变画布位置吧！

免责声明

画布状态的所有修改都是永久性的，并且会累加。例如，假设你先移动了 10 像素，然后再移动了 20 像素，那么你总共移动了 30 像素，而不是像 CSS 那样只移动 20 像素。因此，如果采用这种方式，每次更改画布状态后都需要将其还原。
当然，画布 API 允许使用 `.`save和 ` restore.`来实现这一点。

ctx.save(); // Save the canvas' state

// Here goes as many changes as we want

ctx.restore(); // Restore to the last saved canvas' state

翻译

很简单，translate移动画布（移动画布的上下文，而不是画布的节点）。

在这个例子中，我设置了路径位置，然后[0, 0]使用自定义函数将画布移动到指定位置。最后，我用 `<div>`和 `<div>`将所有这些代码包裹起来。getPositionstranslatesaverestore

旋转

没错，就是rotate旋转画布。不过，这里可能会有点复杂。
首先，你要记住预期角度是以弧度为单位的顺时针方向（0：无旋转，π：半圈，2π：整圈）。
其次，你不能自定义旋转中心，它始终是原点 (0, 0)。如果你想使用其他旋转中心，必须先平移画布。
假设我们想从矩形中心旋转 45°。

裁剪掉的边角是怎么回事？

画布上的内容开始超出范围了，不过我们暂时不用担心这个问题。

规模

工作方式几乎相同rotate。同样，您无法定义比例中心，因此必须自行处理。

转换

这个函数允许你一次性完成缩放、倾斜和平移。用起来确实很麻烦。不过，这是唯一能进行倾斜的方法。所以，也算是个办法吧……

画布尺寸

默认情况下，canvas 元素的尺寸为 (300x150) 像素。如果尝试使用 CSS 更改其大小，它会被拉伸。但是，使用节点的属性width可以height增加其尺寸。大多数情况下，使用 JavaScript 会更方便。
此外，canvas 元素的默认显示方式为 `display: "inline"none`，这通常不是你想要的效果。

getPositions最后，让我们动态地改变和返回的值，getRotation以便添加一些动画效果。

以下是变化之处：

• 添加 CSS 代码，使画布全屏显示并变为灰色。
• 每帧递增一个变量i并将其传递getPositions给getRotation
• 加入一些数学getPositions知识getRotation
• 将所有变量设为画布尺寸的比例

好吧，这很感人，但还是有点伤感。

我完全同意你的观点，我的读者，这是一个虚构的寓言，希望我们能在第三部分看到如何处理图像。

同时，您可以尝试使用 和 为矩形添加“摇摆”scale效果Math.cos。

再见！