【CocosCreator入门】CocosCreator组件 | Canvas（画布）组件

       Cocos Creator 是一款流行的游戏开发引擎，具有丰富的组件和工具，其中的 Canvas 能够将游戏物体渲染到屏幕上。

目录

一、组件介绍

二、渲染模式

三、组件属性

四、组件使用

五、脚本示例

一、组件介绍

       Canvas 组件是 Cocos Creator 中重要的组件之一。在 Cocos Creator 中，场景中所有 UI 和游戏物体的显示都是由 Canvas 组件实现的。Canvas 组件是一种可视化的渲染框架，它能够将游戏物体渲染到屏幕上，同时也提供了一些非常实用的功能，如层级管理、渲染顺序、渲染模式等等。

二、渲染模式

       Canvas 组件有两种渲染模式，分别是“屏幕空间”和“世界空间”。屏幕空间模式下，Canvas 组件会将所有的游戏物体渲染到屏幕上。这种模式下，Canvas 组件可以直接控制 UI 的显示层级，并且支持一些 UI 元素的变形和动画效果。世界空间模式下，Canvas 组件能够支持更为复杂的场景，支持多层的渲染和深度排序，可以将大量游戏物体渲染到同一个 Canvas 中，大大减少了渲染开销。

三、组件属性

1. Design Resolution：设计分辨率，用于设计 UI 界面，通常与屏幕分辨率不同，根据游戏的需要可以自行定义。

2. Fit Width/Height：屏幕适配模式，适用于适应不同分辨率的设备，获得最佳的视觉效果。

四、组件使用

①创建子节点

       在 Canvas 节点下创建子节点也非常简单，只需要在层级管理器中右键点击 Canvas 节点，选择 Create，然后选择想要创建的节点类型即可。Canvas 节点的子节点可以是任何 Cocoscreator 所支持的节点类型，例如：Sprite、Label、Button、ProgressBar 等。

②节点的层级

       在开发游戏时，所有节点都有一个优先级。如果某个节点的优先级高，那么它就会在其他节点的上面绘制。我们可以通过修改节点在层级管理器中的位置来调整优先级。

③节点的坐标系

       在 Cocoscreator 中，Canvas 的坐标系是以左下角为原点的，x 轴向右，y 轴向上。我们可以在节点的属性检查器中调整节点的位置、大小等属性，也可以通过代码来修改节点的坐标，以实现游戏场景的布局。

五、脚本示例

       在游戏启动时，Canvas 会默认初始化一些设置，例如设置触摸、鼠标等事件的响应，设置界面尺寸等。但是，我们也可以通过代码来自定义 Canvas 的初始化操作。

       例如，我们可以在 Canvas 节点上添加一个脚本组件，然后在脚本中重载 start 函数，在函数中设置自定义初始化操作，如下所示：

start: function () {cc.view.setDesignResolutionSize(480, 800, cc.ResolutionPolicy.SHOW_ALL);
}

        在上面的代码中，我们使用 cc.view.setDesignResolutionSize 函数来设置游戏设计分辨率为 480×800，然后使用 cc.ResolutionPolicy.SHOW_ALL 来设置屏幕适配模式为全屏显示所有内容。

        总之，在 Cocoscreator 中，Canvas 组件是游戏开发中非常重要的组件之一。它的主要作用是控制游戏场景的显示和交互，我们可以通过 Canvas 节点的子节点来添加游戏所需的 UI 元素、精灵、动画等等，通过代码来控制游戏场景的初始化和逻辑。掌握 Canvas 组件的使用方法对于开发者来说是非常必要的，它将帮助我们更快速、高效地完成游戏开发任务。