html5 - 如何检查在 Canvas 上绘制的形状?

标签 html drawing html5-canvas

我做了一个网页,上面有一个 Canvas ,我们可以在上面徒手画画。现在我想知道是否有办法发现用户现在画了一个“正方形”、“圆形”或“矩形”?我的意思是,如果我在 Canvas 上画一个正方形,我该如何编写代码来检查我是否画了一个正方形?

最佳答案

与您合作的细节不多。

此外,“徒手”意味着非常不精确的形状。

所以这里有一个通用的答案来确定你的形状:

确定手绘形状的边界框(minX,maxX,minY,maxY)。

测试 #1:如果 (maxX-minX) 与 (maxY-minY) 有很大不同,那么您就有了一个矩形。

测试#2:将其中一个拐角朝中心走。如果快速划过绘图的一部分,就会得到一个正方形。

通过排除法,如果 Test#1 和 Test#2 都失败了,那么你就有了一个圆圈。

关于html5 - 如何检查在 Canvas 上绘制的形状?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17352903/

相关文章:

winforms - 在 F# 中绘制 Windows 窗体

javascript - 我需要在 html Canvas 中堆叠多个随机着色的矩形

javascript - Html Canvas - 仅在 X 或 Y 轴上移动对象

html - 即使将元素设置为 100% 宽度,元素也不会拉伸(stretch)以适应寡妇

html - 带有淡出边缘/边框的框

Javascript 如何使用函数 match()?

scheme - 如何使用 GIMP Script-Fu 导出扁平化图像

javascript - 如何在两个 DOM 元素之间绘制一条贝塞尔曲线

php - 在 HTML 中显示 JSON 数据

javascript - canvas2d toDataURL() 在不同浏览器上的不同输出