javascript - html5 canvas 2d使人体和填充区域

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

我还没有找到一些现成的决定。我只有一个小算法如何实现它。


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


请提示是否正常。也许，有更简单的方法。我希望能看到一些与实现该想法的例子相关的链接。

最佳答案

我从未与SVG合作


不用担心，SVG与HTML几乎相同，标签/属性也有所不同，当然也是如此。但是，如果您可以处理HTML，则距离操作SVG的距离还不到一百万英里。

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

真正精巧的是，您可以使用Adobe Illustrator，InkScape之类的工具或任何支持SVG的Vector绘图工具来制作它们，甚至可以使用Online 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>