html - Canvas的形状识别转化为功能

Question

首先;抱歉，如果在这里问这样的问题是错误的地方。
如果我犯了这个错误，请随意点赞或关闭主题。

我最近开始“玩”html5、jquery 和 canvas。

我想创建一个简单的快速“配对形状”的移动网站小游戏:

网站显示 3 种形状(即:正方形、圆形、正方形)，玩家必须猜测下一个是什么形状。为此，玩家只需在手机上画出形状即可。

例如:形状是正方形、圆形、正方形。玩家只需在他的 iPhone 屏幕上用拇指“画”一个圆圈，就可以了 -> 下一关!

问题是我真的不知道如何检查玩家是否创建了圆形、正方形或其他形状。

起初我想到了手写识别并找到了一个有用的链接:http://brenoferreira.wordpress.com/2012/03/14/handwriting-recognition-com-html5-canvas/ (我也不会说葡萄牙语，但代码说明了一切)

他在服务器端使用了 ASP.NET MVC 4 + JSON 代码，我的问题是；由于作者在 2012 年 3 月写了这篇文章，还有其他解决方案吗？

我真的不想使用 ASP.NET，是否可以使用其他代码创建类似的东西？ (我假设 PHP 不能做这样的事情)。

我也找到了这个 http://home.comcast.net/~urbanjost/canvas/graffiti/graffiti.html这也是相关的。

我很确定这是可能的。在此先感谢您的提示/资源/帮助。

Answer 1

对于像这样的简单形状，您可以使用角度差和拐点值来很好地猜测形状。

对于所有形状，您记录笔划中的所有点(或将所有笔划合并到一个 session 的路径中)。

对于正方形，您逐行(前一点和当前点)计算它们之间的角度。如果角度高于阈值(例如 50 度)，那么您就有角了。如果你最终得到三个角并且终点靠近起点那么你可能有一个正方形。还要考虑相对于整个绘图区域的权重位置。

对于圆，您可以对所有直线的平均角度进行加权。他们都会朝着一个方向+/-一些度数前进。与正方形一样，检查终点是否在起点的“区域”内。

帖子的当前版本指出:“形状是正方形、圆形、正方形。” - 如果我假设最后一个应该是三角形，过程与正方形相同，只需计算 2 个更陡的角。

您可以使用平滑算法、移动平均、点减少算法等来处理更简单的数据。归根结底，一切都与统计和概率有关。

(这是一个广泛的主题，所以我有点不愿意为此编写代码，但我希望该理论有助于理解)。

角度计算代码(x1、y1为当前点，x2、y2为前一点):

var ang = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;

(顺便说一句，您可以在原生 JavaScript 中完成所有这些计算)。