html5 canvas 2d 制作人类 body 并填充区域

Question

我需要画一个人，然后根据服务器图片中的一些数据绘制他受伤的 body 部位（手、腿等）。 human semple

我还没有为此找到一些现成的决定。我只有小算法如何填充它。

拍一张男人的照片，然后把 canvas 放在背景上。
编写具有某些需要的定位数据的函数 body部分给图吧。

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

Answer 1

I have never worked with SVG

别担心 SVG 与 HTML 几乎相同，当然也有不同的 tags/properties 等等。但是，如果你能处理 HTML 你离能够操纵 SVG 不到一百万英里。

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

真正巧妙的是，您可以使用 Adobe Illustrator、InkScape 或任何支持 SVG 的矢量绘图工具来制作它们，甚至可以使用在线 SVG 绘图工具。然后您可以复制粘贴 SVG 文本，添加 class 等，如 .leftArm、.torso 等，并使用所有常规 javascript 工具添加 class 等。如果你喜欢 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>

html5 canvas 2d 制作人类 body 并填充区域

html5 canvas 2d make human body and fill region

html

javascript

2d

canvas

makehuman