使用Arc的HTML5 Canvas Clip剪辑错误

HTML5 Canvas Clip using Arc is clipping wrong

本文关键字：错误 Clip Canvas Arc HTML5 使用      更新时间：2023-09-26

所以我尝试过使用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填充圆弧时看到的那样。

小提琴

为什么会出现这种情况，我该如何修复？

提前谢谢。

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

好的，所以我发现了问题，只需添加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

相关文章：