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

如你所见，我已经将起始角度设置为-45度，结束角度设置为45度，但我得到的是圆形/半月形的切割，而不是一个太平洋的形象，如你所见使用ctx.fill填充弧。

FIDDLE

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

提前致谢。

Answer 1

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

Answer 2

好的，所以我发现了问题，只需添加ctx.moveTo（x，y），其中x和y是弧的中心，如下所示：

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

FIDDLE

使用Arc的HTML5 Canvas剪辑剪辑错误

2 个答案: