Question

我需要在Canvas中创建自定义形状，以便以人体形状显示图形。我已经创建了形状，但是当我尝试填充它时，它没有被正确填充。有些部分缺失，有些部分溢出。

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

  context.beginPath();

  context.arc(65,60 ,35,0,Math.PI*2,true);

  context.moveTo(5,100);
  context.lineTo(5, 300);
  context.moveTo(35,300); 
  context.arc(20, 300, 15, 0, Math.PI);

  context.moveTo(35,300);
  context.lineTo(35, 250);
  context.lineTo(95, 250);
  context.lineTo(95, 300);

  context.moveTo(125,300);
  context.arc(110, 300, 15, 0, Math.PI);
  context.moveTo(125,300);
  context.lineTo(125,100);
  context.lineTo(5, 100);

  context.fill();

Answer 1

当你正在画圆圈时，你会遇到麻烦。

你在（5,300），然后你移动到（35,300），然后你将你的圆圈画回（5,100），然后再回到（35,300）。那会弄乱你的面具。

相反，您可以通过在acr（）末尾添加参数true来逆时针绘制圆圈 - 函数：

之前：context.arc(110, 300, 15, 0, Math.PI);

之后：context.arc(110, 300, 15, Math.PI, 0, true);

如你所见，我也反转了弧度值

http://jsfiddle.net/Niddro/vqbjqndm/4/

画布自定义形状填充问题

1 个答案: