我正在使用html5画布,我正在创建一个游戏,因为它可以将你的脸上传到游戏中,并将其用作主要的charactar。不幸的是,游戏中的角色是圆形的,就像笑脸一样。
那怎么办呢?
是否可以拍摄照片,并从中剪切一个圆圈,因此圆圈外的任何内容都是透明的? 如果是这样,将如何做?
答案 0 :(得分:6)
你想要制作一个剪切路径。此路径将剪切圆圈外的所有内容:
ctx.save();
ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.clip();
// draw the image
ctx.restore();
因此,您在此画布上绘制的下一个内容将仅显示在剪切路径内。
您需要在之前和之后保存和恢复上下文。
以下是关于这个主题的更多内容:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing#Clipping_paths