Question

HTML： HTML：

<canvas id="main"  height="1000" width="1500"></canvas>

JS

  var c = document.getElementById("main");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(200,300);
  ctx.lineTo(800,0);
  ctx.moveTo(800,0);
  ctx.lineTo(1500,300);
  ctx.moveTo(1500,300);
  ctx.lineTo(200,300);
  ctx.closePath();
  ctx.stroke();
  ctx.fillStyle="#8ED6FF";
  ctx.fill();

JSFiddle

Answer 1

Fiddle 更新的代码

  var c = document.getElementById("main");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(200,300);
  ctx.lineTo(800,0);
  ctx.lineTo(1500,300);
  ctx.lineTo(200,300);
  ctx.closePath();
  ctx.stroke();
  ctx.fillStyle="#8ED6FF";
  ctx.fill();

你不需要再次移动到同一点，因为你已经在那一点上......这就是为什么它不起作用

Answer 2

子路径

这将创建（清除）一条新的主路径，到目前为止一直很好：

ctx.beginPath();

moveTo()调用将在主路径上创建一个新的子路径，此处：

ctx.moveTo(200,300);
ctx.lineTo(800,0);

在这里：

ctx.moveTo(800,0);
ctx.lineTo(1500,300);

在这里：

ctx.moveTo(1500,300);
ctx.lineTo(200,300);

最后，这会将路径中的第一个点与最后一个点连接起来（在这种情况下，它们已经重叠）：

ctx.closePath();

由于您现在有三个子路径代表三条未连接的线路，因为它们都有自己的子路径，因此无法将它们填充为单个形状。而且他们不会简单地通过重叠点来连接。

使用单个子路径创建连续行

您需要在当前子路径上创建连续行。 lineTo()方法将从当前路径/子路径的最后一个点继续到它指定的坐标，因此要使用单个子路径创建单个形状，只需向子路径添加一个新点即可。路径：

ctx.beginPath();       // new main path
ctx.moveTo(200,300);   // creates a new sub-path, start point (200, 300)
ctx.lineTo(800,0);     // line from (200, 300) to (800, 0), current point now: (800,0)
ctx.lineTo(1500,300);  // line from (800, 0) to (1500, 300)
//ctx.lineTo(200,300); // not needed because:
ctx.closePath();       // will connect (1500,300) to (200,300) on the current sub-path

使用fill()也将关闭路径，内部和非永久性路径，因为假设它具有＆gt;，则无法填充开放路径。 2分（它为您节省了一行代码，但不是很重要，只需注意stoke() 不在内部为您关闭路径。）

另外，tip not many are aware of：如果您打算在同一fillStyle中绘制更多封闭形状，可以在moveTo()之后继续closePath()来创建一个新的子路径，无需先使用fill() / beginPath() ..

HTML Canvas填充不起作用

2 个答案:

子路径

使用单个子路径创建连续行