javascript - 如何在一条线上填充封闭的形状？

Question

我使用 html Canvas 创建了这条线:

我想填充行中的循环，使其看起来像这样:

然而，当我填写它时，它就变成了:

我确实尝试过使用路径，结果完全相同，只是用一条线连接开始和结束。

代码的抽象:

var canvas = $("canvas")[0], ctx=canvas.getContext("2d");
ctx.moveto(0,0);
// code to stroke path of mouse cursor;

我怎样才能得到我想要的结果并只填充线中的封闭形状？

Answer 1

问题是 fill() 方法正在关闭路径，基本上是从起点到终点画一条线。结果如您所见，整个路径都已填满。

一个可能的解决方案是将指针返回到 fill() 不会导致不需要的填充的位置，尽管这对您拥有的看似随机的行来说会很困难。下面的示例演示了这一点。画完线后，我只需将指针返回到 closePath() 不会导致任何闭合区域填充的位置。

右侧的 Canvas 将最终点移动到中性位置，以便 fill() 的行为符合预期。

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(100, 20);
context.lineTo(100, 120);
context.lineTo(150, 120);
context.lineTo(150, 70);
context.lineTo(50, 70);

context.fill();

context.lineWidth = 2;
context.strokeStyle = 'blue';
context.stroke();

var canvas = document.getElementById('myCanvas2');
var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(100, 20);
context.lineTo(100, 120);
context.lineTo(150, 120);
context.lineTo(150, 70);
context.lineTo(50, 70);

// Go back to a position the line
// won't cause unwanted fills
context.lineTo(100, 70);

context.fill();

context.lineWidth = 2;
context.strokeStyle = 'blue';
context.stroke();

<canvas id="myCanvas" width="250" height="250"></canvas>
<canvas id="myCanvas2" width="250" height="250"></canvas>