我需要画一个人,然后根据服务器上的一些数据画出他受伤的 body 部位(手、腿等)。 human semple
我还没有找到任何现成的决定。我只有很小的算法来完成它。
- 拍摄一个男人的图像并将 Canvas 放在背景上。
- 编写具有某些所需定位数据的函数 body 部位来描绘它。
请提示是否正常。也许,还有更简单的方法。我希望获得一些带有实现这一想法的示例的链接。
最佳答案
I have never worked with SVG
别担心 SVG 与 HTML 几乎相同,当然有不同的标签/属性等等。但是,如果您可以处理 HTML,那么您距离操作 SVG 就相差不到一百万英里了。
例如,为了让事情变得简单,我制作了两个圆 Angular 正方形,我什至使用 CSS 为它们着色。我什至使用了古老的 :hover 伪类和 CSS 动画来制作悬停效果。当然,您甚至可以使用 Javascript 进行更改,甚至从 Ajax 查询等获取数据。
真正巧妙的是,您可以使用 Adobe Illustrator、InkScape 或任何支持 SVG 的矢量绘图工具来制作它们,甚至还有在线 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>
关于javascript - html5 canvas 2d制作人体并填充区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40514294/