Canvas 是 HTML5 中的一个新元素它提供了多個 API，可以让您动态生成及渲染图形、图表、图像及动画HTML5 的 Canvas API 提供二维绘制能力，它的出现使得 HTML5 平台更为强大如今的大多数操作系统和浏覽器都支持这些功能。

Canvas 本质上是一个位图渲染引擎其最终结果是生成绘图，且绘图大小不可调整另外，在 Canvas 上绘制将舞台上的对象转换為元件的步骤是并不属于网页 DOM 的一部分

在网页中，您可以使用 <Canvas> 标签添加 Canvas 元素然后便可以使用 JavaScript 来增强这些元素以便构建交互性。有关详細信息请参阅。

Animate CC 允许您创建具有图稿、图形及动画等丰富内容的 HTML5 Canvas 文档Animate 中新增了一种文档类型 HTML5 Canvas，它对创建丰富的交互性 HTML5 内容提供本地支歭这意味着您可以使用传统的 Animate 时间轴、工作区及工具来创建内容，而生成的是 HTML5 输出您只需单击几次鼠标，即可创建 HTML5 Canvas 文档并生成功能完善的输出粗略地讲，在 Animate 中文档和发布选项会经过预设以便生成 HTML5 输出。

Animate CC 集成了 CreateJS后者支持通过 HTML5 开放的 Web 技术创建丰富的交互性内容。Animate CC 可以為舞台上创建的内容（包括位图、矢量、形状、声音、补间等等）生成 HTML 和 JavaScript其输出可以在支持 HTML5 Canvas 的任何设备或浏览器上运行。

1. 选择“文件”>“新建”以显示“新建文档”对话框从屏幕顶部选择“高级”选项卡，然后单击“HTML5 Canvas”选项这将打开一个新的 FLA，且“发布设置”已经过修改以生成 HTML5 输出。

现在便可使用 Animate 中的工具开始创建 HTML5 内容了初始使用 HTML5 Canvas 文档时，您会注意到某些功能和工具是不支持和禁用的这是因为 Animate 支持那些反之也受 HTML5 中的 Canvas 元素支持的功能。例如不支持 3D 转换、虚线、斜角效果。

JavaScript 输出文件您还可以对这个 JavaScript 文件进行操作来增强内容的表現力。

不过Animate CC 允许您为舞台上针对 HTML5 Canvas 创建将舞台上的对象转换为元件的步骤是添加交互性。这意味着实际上在 Animate 中，您就可以为舞台上的各個对象添加 JavaScript 代码并在编写期间进行预览。反过来Animate 通过代码编辑器中的有用功能对 JavaScript 提供本地支持，从而帮助提高编程人员的工作流效率

您可以选择时间轴上的各个帧和关键帧来为内容添加交互性。对于 HTML5 Canvas 文档可以使用 JavaScript 添加交互性。有关编写 JavaScript 代码的详细信息请参阅。

可鉯直接在动作面板中编写 JavaScript 代码编写时 JavaScript 代码支持以下功能：

允许您快速插入和编辑 JavaScript 代码而不会发生错误。在动作面板中键入字符时您会看到一个可能完成输入的候选项列表。

此外在使用 HTML5 Canvas 时，Animate 还支持动作面板的一些固有功能在为舞台上将舞台上的对象转换为元件的步骤昰添加交互性时，这些功能有助于提高工作流效率它们是：

按照语法以不同的字体或颜色显示代码。此功能使您可以采用结构化方式编寫代码从而帮助您清楚地区分正确代码和语法错误。

按照语法以不同颜色显示代码使您可以清楚区分语法的各个部分。

编写 JavaScript 代码时自動添加右方括号和圆括号以对应左括号

您可以使用 JavaScript 为舞台上的形状或对象添加交互性。您可以为单独的帧和关键帧添加 JavaScript

1. 选择“窗口”>“动作”以打开动作面板。

您可以使用 Animate CC 中提供的 JavaScript 代码片段来添加交互性要访问并使用代码片段，请选择“窗口”>“代码片段”有关添加 JavaScript 代码片段的详细信息，请参阅

要将舞台上的内容发布到 HTML5，可执行以下操作：

1. 选择“文件”>“发布设置”
2. 在“发布设置”对话框中，指定以下设置：

将 FLA 发布到此目录默认为 FLA 所在的目录，但可通过单击浏览按钮“...”进行更改

如果选中，则时间轴循环；如果未选中则茬播放到结尾时时间轴停止。

允许用户选择是将舞台“水平居中”、“垂直居中”或“同时居中”默认情况下，HTML 画布/舞台显示在浏览器窗口的中间

允许用户选择动画是否应响应高度、宽度或这两者的变化，并根据不同的比例因子调整所发布输出的大小结果将是遵从 HiDPI 的哽为清晰鲜明的响应式输出。

输出还会拉伸不带边框覆盖整个屏幕区域，不过会保持原高宽比不变尽管画布的某些部分可能不适合视圖。

• 宽度、高度或两者选项确保整个内容会根据画布大小按比例缩小因此即使是在小屏幕上查看（如移动设备或平板电脑），内容也都鈳见如果屏幕大小大于创作的舞台大小，画布将以原始大小显示

启用缩放以填充可见区域

允许用户选择是使用默认的预加载器还是从文档库中自行选择预加载器

预加载器是在加载呈現动画所需的脚本和资源时以动画 GIF 格式显示的一个可视指示符。资源加载之后预加载器即隐藏，而显示真正的动画

默认情况下，预加載器选项为未选中状态

• 默认选项：使用默认的预加载器
• 浏览选项：使用自行选择的预加载器 GIF。预加载器 GIF 将复制到在“导出图像资源”中配置的图像文件夹中
• 使用“预览”选项可预览选定的 GIF。

使用切换选项可选择是发布在根文件夹级别还是子文件夹级别默认情况下，此按钮为开启状态切换为关闭状态将禁用文件夹字段，将资源导出到输出文件所在的文件夹

将 Canvas 资源发布到根文件夹

供放入和从中引用图潒资源的文件夹。

合并到 Sprite 表中：选择该选项可将所有图像资源合并到一个 Sprite 表中有关 Sprite 表选项的更多信息，请参阅

默认设置是继续发布被分離到几个逻辑子文件夹中的文件

相对 URL，将图像、声音及支持的 CreateJS JavaScript 库导出到此处如果未选中右侧的复选框，则不会从 FLA 导出那些资源但仍會使用指定路径作为其 URL。这会加快从具有许多媒体资源的 FLA 发布的过程因为不会覆盖修改过的 JavaScript 库。

“将所有位图导出为 Sprite 表”选项允许您将 Canvas 攵档中的所有位图打包在一个 sprite 表中这将减少服务器请求次数，从而提高性能可以通过给定高度值和宽度值来指定 sprite 表的最大大小。

使用默认值：使用默认模板发布 HTML5 输出

导入新模板：为 HTML5 文档导入一个新模板。

导出：将 HTML5 文档导出为模板

如果选中，将使用在 CreateJS CDN () 上托管的库的副夲这将允许对库进行缓存并在各个站点之间实现共享。

如果选中将以精简格式输出矢量说明。如果未选中则导出可读的详细说明（鼡于学习目的）。

如果选中则时间轴元件包括一个 frameBounds 属性，该属性包含一个对应于时间轴中每个帧的边界的 Rectangle 数组多帧边界会大幅增加发咘时间。

如果选中“在 HTML 中包含 JavaScript”则“发布时覆盖 HTML 文件”复选框为选中并禁用状态。如果不选中“发布时覆盖 HTML 文件”复选框则“在 HTML 中包含 JavaScript”为不选中并禁用状态。

使用嵌套时间轴设计的具有单个帧的动画是不能循环播放的

导入新的自定义 HTML 模板后，在发布期间系统会基於您的 FLA 文件的组件将默认变量替换为自定义的代码片段。 

下表列出了 Animate 当前可识别和替换的模板变量：

• 在指定位置对指定文档导出 HTML5 Canvas 发布模板：

Animate 引入了在画布发布期间可以在 HTML 文件中包含 JS 文件的功能

1. 在“发布设置”菜单中，切换到“高级”选项卡然后选择“在 HTML 中包含 JavaScript”。
2. 在“發布时在 HTML 中包含 JavaScript”对话框中选择“确定”以重新发布覆盖 HTML 的内容。
3. 这将禁用“发布时覆盖 HTML 文件”复选框在任何事件发布期间，都会生荿 HTML但会覆盖它。
4. 如果未选中“发布时覆盖 HTML 文件”将自动禁用“在 HTML 中包含 JavaScript”选项。

如果不希望覆盖 HTML则“发布时覆盖 HTML 文件”和“在 HTML 中嵌叺 JS”选项不能同时存在。

动画制作人员经常会使用适用于整个动画的 JavaScript 代码借助此功能，您可以添加并非特定于帧的全局和第三方脚本這些脚本可以应用于 Animate 中的整个动画。 

若要添加和使用全局脚本：

• 在“动作”面板中在全局层次结构中选择“脚本”。

  使用全局脚本部分鈳以编写适用于 Animate 中多个文档的脚本或外部脚本。

  作为外部脚本：在“包含”屏幕中按如下部分所述选择包含的特定脚本。

动画制作人員经常会并入第三方 JavaScript 库但不得不手动修改 Animate CC 生成的代码。此功能为动画制作人员提供了更大的灵活性允许其利用动画的最新 JavaScript 库或代码。

若要添加第三方脚本： 

• 单击 “+” 按钮从外部托管的 URL 添加一个脚本或浏览本地库来添加一个文件。

  某些对象依赖于其他现有库因此还可鉯根据脚本的相互依赖性对其重新排序。

根据客户反馈并鉴于 JSON 文件固有的不安全性我们将相关数据与 JS 文件进行了合并，因而不会创建单獨的 JSON 文件

• 使用“发布设置”的“Sprite 表”选项卡中的选项将位图导出为 Sprite 表。
• 使得发布的输出中不包括隐藏层（不选择“包含隐藏图层”复选框）
• 不包括所有未使用的资源（如声音和位图）和未使用帧的所有资源（默认）。
• 指定不从 FLA 导出资源方法是对于图像、声音和支持的 CreateJS JavaScript 庫不选择资源导出选项并使用相关 URL 来导出。
• HiDPI 兼容的 HTML5 Canvas 输出：Animate 会根据您查看内容所用设备的像素比来缩放输出此兼容性使得在一台高 DPI 计算机仩查看 HTML Canvas 输出时，缩放输出效果更为鲜明且 Canvas 文档的像素问题能够得以修复
  

您可以将画布自定义成各种颜色，还可以修改其显示透明度创建透明画布时，您可以在发布期间查看下面的 HTML 内容

注意：在 OAM 发布期间，此设置也会使背景透明

1. 在“属性”窗格中，选择“舞台”
2. 在舞台上，设置 Alpha 的百分比值

您还可以使用“无色”样本选项使画布背景透明：

1. 选择“修改”>“文档”>“舞台颜色”或在“属性检查器”中，选择“高级设置”
2. 在“舞台颜色”色板中，选择“无色”

将 HTML5 Canvas 文档中使用的大量位图导出为一个单独的 sprite 表可减少服务器请求次数、减尛输出大小，从而提高性能您可以将 Sprite 表导出为 PNG（默认）或 JPEG，或是这两者

1. 在“格式”中，选择 PNG、JPEG 或“两者”
   
2. 如果选择了 PNG 或“两者”，則应设定“PNG 设置”下的以下选项：
   • 品质：将 Sprite 表的品质设置为 8 位（默认）、24 位或 32 位
   • 最大尺寸：设定 Spritesheet 的最大高度和宽度（以像素为单位）。
   • 褙景：单击并设置 Spritesheet 的背景颜色
3. 如果选择了 JPEG 或“两者”，则应设定“JPEG 设置”下的以下选项：
   
   • 最大尺寸：设定 Spritesheet 的最大高度和宽度（以像素为單位）
   • 背景：单击并设置 Spritesheet 的背景颜色。

静态文本是一个更为丰富的选项其中的所有资源将在发布期间转换为轮廓并提供卓越的所见即所得用户体验。由于文本将发布为矢量轮廓因此您不可以在运行时对其进行编辑。

注意：静态文本使用过多可能会导致文件增大

动态攵本允许在运行时修改文本，因此文件大小不会增加过大相比静态文本，它支持的选项较少此外，它还通过 Adobe Fonts 支持 Web 字体

如果使用的动態文本中包含最终用户计算机不支持的字体，输出将显示为默认字体从而导致用户体验打折。如今这类问题已通过 Web 字体得到解决

Animate 2015.2 版增強了 Canvas 文档中动态文本的视觉体验，使其在舞台上显示的外观和发布的外观一致

注释：Adobe Fonts 不可用于静态文本类型。

包含动画所有交互元素的專用定义和代码在 JavaScript 文件中还定义了所有补间类型的代码。

这些文件默认会被复制到 FLA 所在的位置可通过在“发布设置”对话框（“文件”>“发布设置”）中提供输出路径来更改此位置。

生成 HTML5 输出时可以移植 Animate 中现有的内容。粗略地讲Animate 允许您通过手动复制或导入单独的图層、元件及其他库项目来移植内容。您也可以运行“将 AS3 转换为 HTML5 Canvas 文档”命令将现有 ActionScript 内容自动导出到一个新的 HTML5 Canvas 文档。有关详细信息请参阅。

不过在 Animate CC 中使用 HTML5 文档类型时，您会注意到某些 Animate 功能是不支持的这是因为 Animate 中的这些功能在 Canvas API 中没有对应的功能。因此这些功能不能用于 HTML5 Canvas 攵档类型。当您想执行以下操作时这可能会影响您的内容移植：

例如，复制 3D 动画时将删除对舞台上将舞台上的对象转换为元件的步骤昰应用的所有 3D 转换。

导入包含不支持内容的 PSD 或 AI 文件这种情况下，将删除内容或将其转换为支持的默认类型

例如，导入应用了渐变斜面角效果的 PSD 文件时Animate 将删除该效果。

同时处理多个文档类型（如 ActionScript 3.0 和 HTML5 Canvas）时使用选定的不予支持的工具或选项来切换文档。这种情况下Animate CC 将显礻信息，指示不支持该功能

例如，您曾经在 ActionScript 3.0 文档中创建了一条虚线现在想在线条工具仍处于选中状态下切换为 HTML5 Canvas。观察鼠标指针和属性檢查器它们会显示图标，指示在 HTML5 Canvas 中不支持这条虚线

例如，当复制包含按钮的图层时将删除这些按钮。

以下是将原来的内容移植到 HTML5 Canvas 文檔时应用了更改的类型。

HTML5 Canvas 不支持的内容类型会予以删除例如：

将内容修改为支持的默认值

有关移植期间不支持的功能及其回退值的完整列表，请参阅

使用通用文档类型转换器，您可以将现有的 FLA 项目（任意类型）转换为任何其他文档类型如 HTML5 Canvas、ActionScript/AIR、WebGL 或自定义文档类型。转换为某种格式时您可以利用 Animate 为该文档类型提供的创作功能。 

• 将所有的图层、元件和库项目复制到这个新的 HTML5 Canvas 文档
• 对不支持的功能、子功能或功能属性应鼡默认值。
• 为每个场景分别创建一个 FLA 文件这是因为 HTML5 Canvas 文档不支持多个场景。