HTML5 Canvas 是一个强大的绘图技术，提供了丰富的 API 来绘制 2D 和 3D 图形。但是，当我们需要展示一个比画布尺寸更大的场景时，就需要使用相机/视口（Camera/Viewport）来进行移动和缩放。
相机/视口是什么？
在绘制一个复杂的场景时，通常会将其分成多个层次，每个层次包含不同的元素。相机/视口就是用来选择哪些元素需要呈现在画布上的工具，它可以实现移动、旋转、缩放等操作。在 2D 场景中，通常使用平移操作来模拟相机/视口。
如何实现？
坐标系
在进行相机/视口操作之前，需要先了解坐标系。在 HTML5 Canvas 中，默认情况下的坐标系原点位于画布的左上角，横轴向右为正，纵轴向下为正。在进行相机/视口操作时，坐标系的原点不变，但坐标系的比例和位置会发生变化。
平移
平移操作可以实现相机/视口的移动，即改变坐标系的位置。在 Canvas 中，平移操作是通过 translate 方法实现的。
ctx.translate(-cameraX, -cameraY);
上述代码将坐标系左移 cameraX，上移 cameraY，即实现了相机/视口在场景中的移动。注意，这段代码应该放在场景绘制代码之前。
缩放
缩放操作可以实现相机/视口的缩放，即改变坐标系的比例。在 Canvas 中，缩放操作是通过 scale 方法实现的。
ctx.scale(zoom, zoom);
上述代码将横轴和纵轴都按比例 zoom 进行缩放，即实现了相机/视口的缩放。同样地，这段代码应该放在场景绘制代码之前。
旋转
旋转操作可以实现相机/视口的旋转，即改变坐标系的方向。在 Canvas 中，旋转操作是通过 rotate 方法实现的。
ctx.rotate(angle);
上述代码将坐标系按逆时针方向旋转 angle 弧度，即实现了相机/视口的旋转。同样地，这段代码应该放在场景绘制代码之前。
示例代码
下面是一个使用相机/视口的示例代码，实现了一个类似于“魔兽争霸”游戏的场景。
-- -------------------- ---- -------
------- ----------- ----------- ----------------------
--------
----- ------ - ----------------------------------
----- --- - ------------------------
-- ----
----- --------- - -
- -- ---- -- ---- ------ ---- ------- --- --
- -- ---- -- ---- ------ ---- ------- --- -
--
----- ----- - -
- -- ---- -- ---- ------ --- ------- -- --
- -- ---- -- ---- ------ --- ------- -- -
--
-- -------
--- ------- - --
--- ------- - --
--- ---- - --
-- ----
-------- ----------- -
-- ----
---------------- -- ------------- ---------------
-- -----------
----- ------ - --- -----------
--------------------------- - -- ------------- - --
------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------