html5 canvas 2d制作人体并填充区域答案

【问题标题】：html5 canvas 2d make human body and fill regionhtml5 canvas 2d制作人体并填充区域
【发布时间】：2017-03-23 16:41:47
【问题描述】：

我需要画一个人，然后根据服务器上的一些数据画出他受伤的身体部位（手、腿等）。 human semple

我还没有为此找到一些现成的决定。我只有很小的算法来完成它。

拍摄一个男人的图像并将画布放在背景上。
编写具有某些所需定位数据的函数身体部位来描绘它。

请提示是否正常。也许，还有更简单的方法。我将不胜感激一些与实现这个想法的例子的链接。

【问题讨论】：

您是否考虑过为此使用 svg。作为 svg，您可以动态渲染。例如，给每个部分一个名称，您可以通过简单地使用 css 来呈现。
@Keith 谢谢你的回答。我明白你的意思，但我从未使用过 SVG。您能否提供有关如何操作的示例或教程？

标签： javascript html canvas 2d makehuman

【解决方案1】：

我从未使用过 SVG

别担心 SVG 几乎与 HTML 相同，当然还有不同的标签/属性等等。但是，如果您可以处理 HTML，那么您距离处理 SVG 的距离不到一百万英里。

例如在这里，为了让事情变得非常简单，我制作了两个圆角正方形，我什至使用 CSS 为它们着色。我什至使用了带有 CSS 动画的老式 :hover 伪类来制作悬停效果。当然，您甚至可以使用 Javascript 进行更改，甚至从 Ajax 查询中获取数据等。

真正巧妙的是，您可以使用 Adobe Illustrator、InkScape 或任何支持 SVG 的矢量绘图工具来制作它们，甚至还有在线 SVG 绘图工具可供您使用。然后，您可以复制粘贴 SVG 文本，添加 .leftArm、.torso 等类，并使用所有常规 javascript 工具添加、删除它们等。如果您喜欢 jQuery，甚至可以使用它来进行更改。

最后，SVG 是可扩展的，因此 Retina Display 已经具备。 IOW：它们在任何设备上看起来都很棒。

.hover-check {
  fill: navy;
  transition: fill 1s ease;
}

.hover-check:hover {
  fill: red;
}

<svg width="220" height="100" viewBox="0 0 220 100"
     xmlns="http://www.w3.org/2000/svg">
  <rect class="hover-check" x="0" y="0" width="100" height="100" rx="15" ry="15"/>
  <rect class="hover-check" x="120" y="0" width="100" height="100" rx="15" ry="15"/>
</svg>

【讨论】：

非常感谢。这确实很容易。现在我明白如何实现它了。