html将图片裁剪成圆形,zrender将一张图片裁剪为圆形

前言

我们都知道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);