html5 canvas 2d создает человеческое тело и заполняет область

Question

Мне нужно нарисовать человека, а затем по некоторым данным с сервера картину его поврежденных частей тела (руки, ноги и т. Д.). человеческое семпло

Я не нашел готового решения для этого. У меня есть только небольшой алгоритм, как его заполнить.

1. Возьмите изображение человека и нарисуйте холст на заднем плане.
2. Чтобы написать функции, которые будут иметь данные позиционирования некоторой необходимой части тела, чтобы изобразить это.

Подскажите пожалуйста, кажется ли это нормальным. Может быть, есть более простой способ. Буду признателен за некоторые ссылки с примером реализации этой идеи.

Answer 1

Я никогда не работал с SVG

Не волнуйтесь, SVG почти идентичны HTML, есть разные теги / свойства и так далее, конечно. Но если вы можете справиться с HTML, вы не сможете управлять SVG.

Например, для простоты я сделал два закругленных квадрата и даже использовал CSS для их раскрашивания. Я даже использовал старый добрый псевдокласс:hover с 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>