Кто должен рисовать и заполнять две слегка смещенные кривые с помощью Canvas API - PullRequest
Новая
       11

Кто должен рисовать и заполнять две слегка смещенные кривые с помощью Canvas API

0 голосов
/ 19 января 2020

Я хочу соединиться с точками с двумя слегка смещенными изогнутыми линиями (кривая Безье) и заполнить область внутри. На следующем рисунке отсутствует последний шаг:

enter image description here

У меня возникают трудности с поиском правильного пути вперед, потому что кажется, что вы не можете закрыть путь и заполнить его ctx.fill() очень легко.

Я был бы очень признателен, если бы услышал какой-либо хороший подход к этой проблеме! Спасибо!

1 Ответ

2 голосов
/ 19 января 2020

Без кода трудно понять, что вы хотите или что вы делаете неправильно. Но заполнение области между кривыми просто требует вызова fill, как только вы определили путь.

Пример 

const ctx = canvas.getContext("2d");
const unit = (a, b, u) => (b - a) * u + a;
const p1 = {x:20, y:420}, p2 = {x:480, y:20}, p3 = {x:20, y:480};
ctx.beginPath()
ctx.moveTo(p1.x, p1.y);
ctx.bezierCurveTo(
    unit(p1.x, p2.x, 0.5), unit(p1.y, p2.y, 0.0),
    unit(p1.x, p2.x, 0.5), unit(p1.y, p2.y, 1.0),
    p2.x, p2.y
)
ctx.bezierCurveTo(
    unit(p2.x, p3.x, 0.5), unit(p2.y, p3.y, 0.0),
    unit(p2.x, p3.x, 0.5), unit(p2.y, p3.y, 1.0),
    p3.x, p3.y
)
ctx.lineWidth = 3;
ctx.lineJoin = "round";
ctx.strokeStyle = "#F80";
ctx.fillStyle = "#08F";
ctx.fill();
ctx.stroke();
<canvas id="canvas" width="500" height="500"></canvas>
...