HTML画布的圆形裁剪
西瓦
我有一个方形的背景，我试图将画布“切”成一个圆形。我试过使用clip（），但这只能在将东西绘制到画布上之前起作用。在画布上绘制完所有内容后，是否有任何方法可以对其进行裁剪？
品牌
您可以用来制作context.globalCompositeOperation='destination-in'“事后”剪辑。
示例代码和演示：
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var img=new Image();
img.onload=start;
img.src="https://i.stack.imgur.com/oURrw.png";
function start(){
var cw,ch;
cw=canvas.width=img.width;
ch=canvas.height=img.height;
ctx.drawImage(img,0,0);
ctx.globalCompositeOperation='destination-in';
ctx.beginPath();
ctx.arc(cw/2,ch/2,ch/2,0,Math.PI*2);
ctx.closePath();
ctx.fill();
}body{ background-color: ivory; }
canvas{border:1px solid red;}Original Image:<br>
<img src='https://i.stack.imgur.com/oURrw.png'><br>
Clip existing content into circle with Compositing<br>
<canvas id="canvas" width=300 height=300></canvas>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
- 上一篇：将ListView中的SelectedItem绑定到Windows Phone 8.1中的ViewModel
- 下一篇：Python 2.7.8 TypeError：“ unicode”对象不可调用
相关文章
Related 相关文章
- 1
画布-透明圆形渐变
- 2
在“圆形”的画布上画线
- 3
HTML5画布：在单个画布上的范围内旋转裁剪的图像
- 4
将图像裁剪成圆形
- 5
将图像裁剪成圆形
- 6
画布裁剪区域和画布堆栈
- 7
调整画布大小而不裁剪
- 8
裁剪画布中显示的图像
- 9
使用非矩形的html5画布裁剪图像并进行转换
- 10
如何在html5画布中前后移动圆形对象？
- 11
HTML5画布形状从圆形到三角形
- 12
可以刻在圆形HTML5画布上的不规则多边形
- 13
需要圆形裁剪功能，而不是矩形
- 14
如何使用Matlab进行圆形裁剪？
- 15
使用蜻蜓导轨裁剪圆形图像
- 16
如何在Titanium中以圆形裁剪图像？
- 17
UWP：将图像裁剪为圆形
- 18
带有“羽毛”边缘效果的画布裁剪
- 19
画布-裁剪不同形状的图像
- 20
图像对象裁剪并在画布中心绘制
- 21
画布缩放时如何裁剪图像
- 22
画布线在Windows Phone应用中被裁剪
- 23
通过画布旋转后的图像裁剪
- 24
使用画布旋转和裁剪图像
- 25
图像对象裁剪并在画布中心绘制
- 26
如何从图像画布中裁剪颜色部分？
- 27
如何在画布中对角裁剪图像
- 28
在Chrome中可点击圆形画布角
- 29
圆形-画布获取lineWidth的像素颜色
我来说两句