html - 在 Canvas 中剪出圆形图像

Question

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

那么这将如何完成呢？

有没有可能拍一张照片，然后从中剪出一个圆圈，这样圆圈之外的任何东西都是透明的？如果是这样，这将如何完成？

Answer 1

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

ctx.save();

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

// draw the image

ctx.restore();

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

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

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

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing#Clipping_paths