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>显示：

• 快速入门：捕获墨迹数据