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

时间:2016-11-09 19:10:22

标签: javascript html5 canvas 2d makehuman

我需要画一个男人,然后根据服务器图片中的一些数据将他受伤的身体部位(手,腿等)。 human semple

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

  1. 拍摄一个男人的照片并将画布放在背景上。
  2. 编写具有某些所需位置数据的函数 身体部位想象它。
  3. 请提示是否正常。也许,有更简单的方法。我会很感激与这个想法充实的例子。

1 个答案:

答案 0 :(得分:0)

  

我从未使用过SVG

不用担心SVG几乎与HTML相同,当然有不同的标签/属性等。但是,如果你能够处理HTML,你可以操纵SVG,而不是一百万英里。

例如,为了使事情变得非常简单我已经制作了两个圆角正方形,我甚至使用CSS来为它们着色。我甚至使用过旧的:使用CSS动画的悬停伪类来制作悬停效果。当然,您甚至可以使用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>
&#13;
&#13;
&#13;