通过合理地设置 pointer-events CSS 属性，可以配置特定的 HTML 元素来忽略用户输入，如清单 9 所示。将 pointer-events 设置为 none 会使元素忽略所有通常与用户输入有关的行为，<div> 中的所有文本、超链接和表单元素都将变得无法选择，实际上就是处于不可用状态。
清单 9. 设置 pointer-events 属性的 CSSdiv.user-interface { position: absolute; z-index: 100; top: 50px; left: 50px; pointer-events:none; }
输入事件将转移到下一层，其中 <canvas> 元素可以捕获到该事件。例如，<canvas> 元素中可能包含一个事件侦听器，可以捕捉鼠标移动事件。
除 Internet Explorer 以外的所有浏览器都支持 pointer-event 的属性（可以采用一些变通方法来在 Internet Explorer 中模拟类似的行为）。
使用一个输入表面 (input surface) 在 canvas 上进行分层另一种捕捉用户输入的方法类似于前面的方法，但是不需要使用 pointer-events:none CSS 属性。在这种方法中，将在 canvas 和 HTML UI 元素之上添加额外的一层，这个层专门用于捕捉用户输入。
这种方法适合那些 HTML 元素仅用于显示目的场景。与 HTML 界面元素之间没有任何互动，因为输入表面会在事件到达底层元素之前全部捕捉它们。图 9 给出了一个示例。
图 9. 使用额外的输入表面在 canvas 上对 HTML 元素分层
您可以通过创建一个使用绝对位置的 <div> 来实现输入表面，使用与 canvas 相同的宽度和高度。将 <div> 保留为空，这将实现一个透明的层，其目的就是捕捉用户输入。
要捕捉用户输入，只需要将所有元素侦听器附加到该 <div>。由于它位于最顶层，所有用户输入都将被该元素而不是底层元素捕获。
后续步骤本系列第 2 部分将进一步展开本文谈到的概念，并通过一个例子展示如何实现一个混合的 canvas/HTML 应用程序。您将逐步了解如何在 canvas 游戏的顶部添加一个基本的 HTML UI，以及如何在 canvas 中创建一个 UI 元素。第 2 部分还将讨论实现动画和文本呈现需要考虑的问题，并解释如何利用 HTML 和 canvas 的优点。
图 10 演示了第 2 部分中的样例游戏概念。
图 10. 结合了 HTML 和 Canvas 元素的样例应用程序
在本文中，您了解了 HTML 模型与 canvas API 相比的优缺点，构建混合 canvas/HTML 应用程序的理由，以及各种对 HTML 和 canvas 元素分层的方法。
接下来，您应当考虑如何选择一种架构来最佳地利用 HTML 和 canvas 的长处，敬请期待本系列第 2 部分，您将获得一些新的技能来实现一个太空射击游戏。
下载描述名字大小
文章源代码canvashtmlpt1sourcecode.zip2KB
参考资料 学习
developerWorks: 登录
标有星（*）号的字段是必填字段。
在您首次登录 developerWorks 时，会为您创建一份个人概要。您的个人概要中的信息（您的姓名、国家/地区，以及公司名称）是公开显示的，而且会随着您发布的任何内容一起显示，除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。
所有提交的信息确保安全。
选择您的昵称
当您初次登录到 developerWorks 时，将会为您创建一份概要信息，您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。
昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的，并且出于隐私保护的原因，不能是您的电子邮件地址。
标有星（*）号的字段是必填字段。
所有提交的信息确保安全。
相关文章
精彩导读
热门资讯
关注我们
