HTML Canvas 填充无效

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() 方法将从当前 path/sub-path 中的最后一个点继续到它指定的坐标，因此要使用单个子路径制作单个形状，只需向子路径添加一个新点通过做路径：

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()也会在内部和非永久性地关闭路径，因为假设它有> 2个点就不可能填充一个开放的路径（它为你节省了一行代码，但不是很重要, 请注意 stoke() 不会在内部为您关闭路径）。

此外，一个tip not many are aware of：如果您打算在同一个fillStyle中绘制更多闭合形状，您可以在[=22]之后继续moveTo() =] 创建一个新的子路径而不需要先使用 fill()/beginPath()..

HTML Canvas 填充无效

HTML Canvas fill not working

html

javascript

canvas

html5-canvas

子路径

创建具有单个子路径的连续行