Material Design 是 Google 推出的基于平面设计的新一代设计语言，注重简单、直观、有目的性的设计，受到了广泛的认可。其中一个重要的设计元素就是圆形头像。
在前端开发中，我们经常需要使用头像或者其他图片，如何实现 Material Design 风格下的圆形 ImageView 呢？接下来，我们就来一步步实现。
使用 Clip-path
clip-path 是 css 中的一个重要属性，可以实现对元素的剪裁效果，我们可以利用这一属性来实现圆形 ImageView。
首先，我们需要将图片作为背景图设置到一个 div 中，并设置该 div 的宽高和圆角半径，如下所示：
-- -------------------- ---- ------- ---- -------------- ------------------ ----------------- --------- ------ ------ - -------------- ------- ------- - ------ ------ ------- ------ -------------- ---- - --------
这样设置后，我们可以看到图片被裁剪成了圆形，但是，图片周围会存在一些白色空隙。这是因为图片的宽高比和 div 的宽高比不一致造成的，我们需要再加上一些 css 代码：
-- -------------------- ---- ------- ---- -------------- ------------------ ----------------- --------- ------ ------ - -------------- ------- ------- - ------ ------ ------- ------ -------------- ---- --------- ------- - --------------- - -------- --- -------- ------ ------------ ----- -- --------------- -- - --------
这样，我们就成功地实现了圆形 ImageView。
使用 Canvas
除了 clip-path，我们也可以使用 canvas 来实现圆形 ImageView。
首先，我们需要在 html 中添加一个 canvas 标签，并设置其宽高，将图片绘制到该 canvas 中：
-- -------------------- ---- ------- ------- ----------- ----------- ---------------------- -------- --- ------ - ---------------------------------- --- ------- - ------------------------ --- --- - --- -------- ------- - ------------- ---------- - ---------- - --------------- -------------------- --------------- --- --- -- ------- - -- ------ -------------------- --------------- ----------------------- -- -- ---- ----- ------------------ - ---------
上面代码中，我们首先获取了 canvas 的上下文，然后创建了一个 Image 对象，并在其 onload 事件中将图片绘制到 canvas 中。clip 方法可以将绘制的图形限制在一个圆形范围内。
使用 canvas 的优点是可以更加灵活地控制图片的绘制和处理，可以实现更复杂的效果，在某些场景下效率也更高。
总结
本文介绍了两种实现圆形 ImageView 的方法：使用 clip-path 和 canvas。 clip-path 由于浏览器兼容性、表现不够灵活等原因，目前还不是很普及，使用 canvas 可以更好地控制图片的绘制和处理。不管使用哪种方法，都可以实现 Material Design 风格下的圆形 ImageView，为网站或移动应用增色不少。
示例代码：
-- -------------------- ---- ------- ---- -- --------- --- ---- -------------- ------------------ ----------------- --------- ------ ------ - -------------- ------- ------- - ------ ------ ------- ------ -------------- ---- --------- ------- - --------------- - -------- --- -------- ------ ------------ ----- -- --------------- -- - -------- ---- -- ------ --- ------- ----------- ----------- ---------------------- -------- --- ------ - ---------------------------------- --- ------- - ------------------------ --- --- - --- -------- ------- - ------------- ---------- - ---------- - --------------- -------------------- --------------- --- --- -- ------- - -- ------ -------------------- --------------- ----------------------- -- -- ---- ----- ------------------ - ---------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6496f72c48841e989442172b