前言
我们都知道css将一张图片变成圆角图片很容易,通过border-radius就可以实现,
但是canvas上面就有点麻烦了 ,原生的写法传送门不做探讨,
咱们这次主要讲讲利用强大的绘图引擎zrender来实现
开始
本文zrender版本号:
image.png
首先我们先绘制一张图片
image.png
然后咱们利用setClipPath对图片进行裁剪
image.png
代码
#main {
width: 400px;
height: 400px;
background: black;
}
console.log(zrender);
var zr = zrender.init(document.getElementById('main'));
var img = new zrender.Image({
style: {
image:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2172656580,259017371&fm=27&gp=0.jpg',
x:100,
y:100,
width:200,
height:200
}
});
var clipPath = new zrender.Circle({
shape: {
cx: 200,
cy: 200,
r: 80
}
});
img.setClipPath(clipPath);
zr.add(img);