Html5 canvas 2d制作人体和填充区域

Question

我需要画一个人，然后根据一些数据从服务器图片他受伤的身体部位(手，腿等)。人出身低微的

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

1. 取一个男人的图像，把画布放在背景上。
2. 编写一些需要的定位数据的函数身体部位来描绘它。

请提示是否正常。也许，有更简单的方法。我希望能提供一些实现这一想法的示例链接。

Answer 1

我从来没有使用过SVG

不用担心SVG几乎与HTML相同，当然有不同的标签/属性等。但是如果你能处理HTML，那么你离处理SVG就不远了。

例如这里，为了让事情变得简单，我做了两个圆角正方形，我甚至用CSS给它们上色。我甚至使用了好的旧的:hover伪类与CSS动画来制作悬停效果。当然，你甚至可以使用Javascript进行更改，甚至从Ajax查询中获取数据等。

真正简洁的是，你可以使用Adobe Illustrator, InkScape或任何支持SVG的矢量绘图工具来制作它们，甚至可以使用在线SVG绘图工具。然后，你可以复制粘贴SVG文本，添加类，如。leftar，。躯干等，并使用所有常规的javascript工具来添加类，删除它们等。如果你喜欢，jQuery甚至可以使用它来进行更改。

最后SVG是可伸缩的，所以已经有视网膜显示功能。ow:它们在任何设备上看起来都很棒。

.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>