Windows 8 JavaScript App開發：在HTML5 Canvas上繪制

Question

我正在使用JavaScript開發Windows 8應用程序。 我一直在利用Windows 8開發中心的代碼示例，但我被卡住了。 我想在我的HTML代碼中添加一個div，例如： <div id="drawArea"></div>並使用JavaScript，以便您可以使用鼠標或手指（如果使用觸摸屏）在此區域繪制MS Paint。

JavaScript中的開發人員中心沒有代碼示例。 我認為因為Windows 8是專為觸摸屏設計的。 我從快速谷歌搜索中嘗試了許多HTML5 / JavaScript畫布繪圖教程，但在Visual Studio中編譯為Windows 8 JavaScript應用程序時，所有這些都是生澀的。

任何建議，將不勝感激？

Answer 1

有幾個示例顯示了您的要求（但它們以“墨水”命名，而不是觸摸，因此它們更容易錯過）：

• 輸入：墨水樣本
• 輸入：簡化的墨水樣本

兩者都顯示了一般繪圖體驗，使用<canvas>作為繪圖表面，使用MSPointer獲取輸入事件，使用Windows.UI.Input.Inking / InkManager處理（捕獲，保存/加載，復制，命中測試）筆划。

但是，第一個示例通過觸摸和其他功能進行了更詳細的介紹，但當然有更多的代碼需要消化。

還有一個快速入門教程，顯示鼠標/筆/觸摸墨水和<canvas>顯示：

• 快速入門：捕獲墨跡數據