Canvas 2D Web 应用程序/简介
本书旨在提供一种相对容易的方式来创建各种交互式应用程序的功能软件原型——包括具有多个同时多点触控手势的非标准多点触控界面。其基本原理是，更容易的原型设计允许更多原型设计，而更多原型设计更有可能产生更好的原型设计。另一方面，使用非标准界面和其他技术的奇特功能的原型通常需要某种形式的编程；因此，本维基教科书重点介绍如何对交互式应用程序的某些常见功能进行编程。
在考虑了各种技术之后，我们决定将本书建立在 HTML5 web 应用程序的基础上；更具体地说，建立在 HTML Canvas 2D 上下文 的 API（应用程序编程接口）上。在这里，“canvas 2D web 应用程序”是一个 HTML5 web 页面，它只显示单个 canvas 元素，但包含多个 JavaScript 函数来在此 canvas 元素中呈现交互式 2D 图形。但是，路径对象和命中区域不会被使用，因为在撰写本文时，canvas 2D 上下文的规范指出这些“功能有风险，可能会由于缺乏实现而被移除”。
这种方法有几个优点
- 它支持许多流行的平台（桌面 web 浏览器、移动设备上的浏览器、iBooks 小部件等）。
- 它支持鼠标和多点触控交互、动画图形和声音。
- 对单个 canvas 2D 上下文的限制使我们能够完全避免 CSS 语法、大多数 HTML 语法以及对浏览器扩展的许多依赖。
- 通过专注于渲染位图图像（而不是矢量图形），可以简化 2D 图形编程。
- 这种方法使我们能够使用单个入口点（对于每个页面）来进行所有呈现和事件处理。
在编写本书时，很明显，提供一个框架的形式，即一组有用的函数，并将其用于示例而不是从头开始每个示例将非常有用。该框架称为 cui2d（Canvas 2D 用户界面），JavaScript 文件称为 cui2d.js。可以 在线 获取自动生成的参考文档。cui2d 的代码以及本维基教科书中示例的代码都是公共领域的。这种方法有一些优点，如介绍该框架的 章节 中所述。
本书面向熟悉 JavaScript 并希望为 web 浏览器或移动设备创建具有 2D 图形的交互式应用程序原型，但不想学习太多 HTML 和 CSS 语法，但愿意学习如何为 HTML5 canvas 2D 上下文编程的任何人。
本书从几个“使用 ... 入门”部分开始，介绍了不同平台上的静态 canvas 2D web 应用程序；因此，您应该阅读您感兴趣的平台的部分。接下来的章节讨论了使用 cui2d 框架实现 canvas 2D web 应用程序的常见功能。在整本书中，都会提供可运行的 HTML 和 JavaScript 代码，以使读者能够尝试所讨论的概念。
本维基教科书中的 GUI 编程使用单个 JavaScript 函数来进行呈现和事件处理。这不是一个新想法
- canvas 2D 上下文规范 包含一个示例（在第 12 章的末尾），其中有一个函数
drawCheckbox(context, element, x, y, paint)，其中paint是一个布尔标志，用于确定该函数是否实际绘制复选框。如果该标志为false，它仍然设置复选框的当前路径，该路径在事件处理程序中用于确定复选框是否被点击。这种方法需要在重绘函数和事件处理程序中对drawCheckbox进行相同的调用，而最好只使用一个函数来进行重绘和事件处理。 - 游戏引擎 Unity 的 2D GUI 系统 也使用相同的函数 (
OnGUI) 来进行呈现和事件处理。但是，在 Unity 中，该函数在每帧（通常是每秒 60 或 30 帧）调用，而有时仅在需要时调用该函数是有益的。此外，Unity 似乎没有将呈现与事件处理分开，这使得更难以处理每帧的多个事件（例如，对于多点触控设备）。
由于呈现仅基于 GUI 的状态变量（包括当前时间），因此事件处理可以被认为是 GUI 状态转换的实现（通过更改状态变量）。因此，呈现和事件处理函数对应于 基于自动机的编程 中自动机的步骤。此外，该函数可能会调用子例程以呈现和处理包含的 GUI 元素（例如，小部件）的事件，这些子例程可能再次调用进一步的子例程等。在这种情况下，包含的 GUI 元素的层次结构反映了程序的调用层次结构。这使我们能够定义和重用标准小部件，这在使用单个 switch 指令来区分 GUI 的所有状态的基于自动机的编程中是困难的。
由于 GUI 始终基于 GUI 的状态变量从头开始呈现，因此它也与 响应式编程 有相似之处，因为 render 函数指定了如何从其状态变量构造 GUI，这与响应式 GUI 编程中将要指定的相同。