3

Как нарисовать эту фигуру в canvas с помощью javascript?
Вот сама фигура:

4
  • Как вариант - сделайте сначала SVG-кривую с этой фигурой, и потом нарисуйте её методом Path2D - stackoverflow.com/questions/9458239/…
    – user347472
    8 апр 2020 в 7:50
  • Используйте кривые Безье, загуглите js canvas bezier
    – AivanF.
    8 апр 2020 в 7:55
  • с ней надо потом что-то делать? если нет то картинку поверх холста и нарисуйте, если да - то Вам уже предложили 2 варианта. 8 апр 2020 в 8:10
  • Как я понял, сначала нужно сделать из этого svg, потом просто скормить в Path2D, далее сделать fill и stroke, верно?
    – Nikto
    8 апр 2020 в 8:34

1 ответ 1

7

Вот, как-то так, контрольные точки подбирал на глаз.

Черная линия соединяет контрольные и опорные точки двух кривых Безье, которые образуют фигуру

let ctx = canvas.getContext("2d");

ctx.fillStyle = 'wheat';

ctx.fill(new Path2D(`
  M40 300 
  C 1 270 1 210 50 150
  C 180 0 250 1 300 50
  v300
`));

ctx.stroke(new Path2D(`
   M40 300 
   1 270 1 210 50 150
   180 1 250 1 300 50
`));
<canvas id=canvas width=300 height=300 />

3
  • Допустим с кривыми безье я разобрался, если я хочу нарисовать сам, как мне расположить опорные точки так, чтобы всё совпадало пиксель в пиксель. Если я буду рисовать на глаз, думаю получится не совсем то.
    – Nikto
    8 апр 2020 в 11:10
  • Вариантов много, можно усложнить код и двигать точки мышкой, можно взять path в каком нибудь векторном редакторе 8 апр 2020 в 11:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.