在帆布剪出圆形图像 [英] Cut out circular image in canvas

问题描述

我使用html5画布，我创建一个游戏，是否可以将你的脸上传到游戏中，并使用它作为主要的charactar。不幸的是，游戏中的角色是圆形的，如笑脸。

I am useing html5 canvas, and I am creating a game were it is going to be possible to upload your face into the game, and use it as the main charactar. Unfortunately, the charactars in the game are circular, like smiley faces.

那么如何做呢？

可以拍摄照片，并从中剪下一个圆圈，所以圆圈外的任何东西都是透明的？
如果是这样，怎么办？

Is it possible to take a picture, and cut a circle out of it, so anything outside the circle would be transparent? If so, how would this be done?

推荐答案

此路径将裁剪圆圈外的所有内容：

You'll want to make a clipping path. This path will clip everything outside of a circle:

ctx.save();

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

// draw the image

ctx.restore();

因此，你在这个画布上绘制的下一件事情只会出现在剪切路径中。

So the next thing(s) you draw on this canvas will only appear inside of the clipping path.

您将需要保存并恢复上下文。

You'll want to save and restore the context before and afterwards.

topic：

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

这篇关于在帆布剪出圆形图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！