我需要画一个男人,然后根据服务器的一些数据来描述他受伤的身体部位(手,腿等)。 human semplehtml5 canvas 2d制作人体和填充区域
我还没有找到一些现成的决定。我只有小算法如何填满它。
- 拍一个男人的形象,并把帆布的背景。
- 若要编写功能,可能需要一些所需的定位数据 正文部分来描绘它。
请提示是否正常。也许,有更简单的方法。我会很感激这个想法的完整实例的一些链接。
我需要画一个男人,然后根据服务器的一些数据来描述他受伤的身体部位(手,腿等)。 human semplehtml5 canvas 2d制作人体和填充区域
我还没有找到一些现成的决定。我只有小算法如何填满它。
请提示是否正常。也许,有更简单的方法。我会很感激这个想法的完整实例的一些链接。
我从来没有与SVG
工作不要担心SVG是几乎相同的HTML,也有这样的,当然不同的标签/属性和,.但是,如果你能够处理HTML,而不是距离能够操纵SVG的百万英里以外的地方。
例如,为了让事情变得非常简单,我制作了两个圆角正方形,甚至使用CSS对它们进行着色。我甚至用CSS:动画悬停的伪类来制作悬停效果。当然,你甚至可以使用Javascript来进行更改,甚至从Ajax查询中获取数据等。
什么是真正整洁的,你可以使用像Adobe Illustrator,InkScape或任何矢量绘图工具,支持SVG的东西,使他们,甚至可以使用Online SVG绘图工具。然后您可以复制粘贴SVG文本,添加像.leftArm,.torso等类,并使用所有普通的JavaScript工具添加类,删除它们等。如果您喜欢,jQuery甚至可以使用它来进行更改。
最后SVG是可扩展的,所以已经有Retina显示功能。 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>
非常感谢。确实很简单。现在我明白如何去实现它了。 –
你有没有想过使用SVG的这一点。作为svg你可以动态渲染。例如,给每个部分一个名称,你可以简单地使用CSS来渲染。 – Keith
@Keith谢谢你的回答。我理解你的意思,但我从未与SVG合作过。你可以提供任何示例或教程如何做到这一点? –