html - 在画布中剪出圆形图像

Question

我正在使用 html5 画布，我正在创建一个游戏，如果可以将你的脸上传到游戏中，并将其用作主要角色。不幸的是，游戏中的角色是圆形的，就像笑脸一样。

那么这将如何实现呢？

是否可以拍照并从中切出一个圆圈，所以圆圈之外的任何东西都是透明的？如果是这样，这将如何完成？

score 6 · Accepted Answer

您需要创建一个剪切路径。此路径将剪裁圆圈外的所有内容：

ctx.save();

ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true); 
ctx.closePath();
ctx.clip();

// draw the image

ctx.restore();

因此，您在此画布上绘制的下一个东西只会出现在剪切路径内。

您需要在之前和之后保存和恢复上下文。

这里有更多关于这个主题的内容：

1 回答 1