javascript - 使用 Arc 的 HTML5 Canvas Clip 剪辑错误

Question

所以我尝试像这样使用 ctx.clip 和 ctx.arc 裁剪图像:

ctx.beginPath();
ctx.arc(250, 250, 250, -Math.PI / 4, Math.PI / 4);
ctx.clip();
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

如您所见，我已将开始 Angular 设置为 -45 度，将结束 Angular 设置为 45 度，但我得到的是圆形/半月形的切割，而不是吃 bean 人图形，如果您会看到使用 ctx.fill 填充圆弧。

FIDDLE

为什么会这样，我该如何解决？

提前致谢。

Answer 1

对 HTML5 或 JavaScript 一无所知，我认为您只是没有正确关闭路径。在圆弧后添加ctx.lineTo(250,250);:http://jsfiddle.net/7em21gvk/