html5 canvas 文档,创建和发布HTML5 Canvas文档

HTML5 Canvas 是什么？

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

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

在网页中，您可以使用 标签添加 Canvas 元素。然后便可以使用 JavaScript 来增强这些元素以便构建交互性。

新文档类型 HTML5 Canvas

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

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

Flash Professional 和 Canvas API

Flash Pro 利用 Canvas API 发布到 HTML5。它可以将舞台上创建的对象无缝地转换成 Canvas 的对应项。Flash Pro 提供 Flash 功能与 Canvas 中 API 的一一对应，从而允许您将复杂的内容发布到 HTML5。

创建 HTML5 Canvas 文档

要创建 HTML5 Canvas 文档，可执行以下操作：

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

在欢迎屏幕上，单击“HTML5 Canvas”选项。这会打开一个新的 FLA，其“发布设置”已经过修改，以便能够生成 HTML5 输出。

也可以选择“文件”>“新建”来显示“新建文档”对话框。单击“HTML5 Canvas”选项。

在 HTML5 Canvas 文档中添加交互性

Flash Pro