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 程式設計中將要指定的相同。