javascript - 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();

你不需要再次移动到同一点，因为你已经在那个点上了..所以这就是它不起作用的原因