Canvas 自定义形状填充问题

Question

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

这是我的演示 link：http://jsfiddle.net/vqbjqndm/

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/

Canvas 自定义形状填充问题

Canvas custom shape fill issue

canvas

html5-canvas