我正在使用 html5 Canvas ，我正在创建一个游戏，如果可以将您的脸上传到游戏中，并将其用作主要角色。不幸的是，游戏中的角色是圆形的，就像笑脸一样。
那么这将如何完成呢？
有没有可能拍一张照片，然后从中剪出一个圆圈，这样圆圈之外的任何东西都是透明的？ 如果是这样，这将如何完成？
最佳答案
您需要创建一个剪切路径。此路径将剪切圆圈外的所有内容:
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
关于html - 在 Canvas 中剪出圆形图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4875623/