前言
看了前两天小米公布的全新LOGO，置信大多数人反馈和我一样，啊啊？？？就这！！！。而后我又从网上翻出了小米延聘的日本国内设计师原研哉，对于设计小米新的LOGO设计理念的诠释。看完这句话第一反馈就是果然是出名设计师人家这个设计理念比单纯的设计值钱，这200W不亏！！而后我转念一想那这样我也行，我没有200w的思维还不能比葫芦画瓢吗？！于是我着手用css实现一波，给敌人夸耀夸耀。
说干就干
这不很简略吗，网上这么多说其实就是一句border-radius的事，分分钟钟给他画进去。然而真的是这样的吗，总是感觉事件没这么简略。于是我现用网上的办法画了一个LOGO，成果如下：
看出什么问题了吗？你说这不一样吗都是圆角矩形啊？没关系接下来咱们把它和小米的LOGO放到一起看一下。
看进去了吗？对！！没错！！被你发现了，小米的圆角矩形是平滑圆角的。那问题来了，这样的话如何用css实现呢？难道只能贴图片了吗？不！！答案是否定的，其实还有个乏味的货色，那就是“Painting API”。
通过Painting API它容许你再css中调用paint函数，而后通过JavaScript定义一个Paint Worklet来加载你注册的画板，其实就是你通过JavaScript来画出你想要失去的任何图形。具体介绍能够查看这几位大佬的文章：
https://juejin.cn/post/694581...
https://zhuanlan.zhihu.com/p/...
https://www.zhangxinxu.com/wo...
步入正题
首先定义css和html
<div class="box"></div>.box { background: #ff6900; -webkit-mask-image: paint(smooth-corners); width: 100px; height: 100px; }在页面上将JS作为模块引入
(CSS.paintWorklet || paintWorklet).addModule("./smooth-corners.js");重点来了：在"smooth-corners.js"文件中注册paint，绘制图形
registerPaint('smooth-corners', class { paint(ctx, size) { ctx.fillStyle = 'black' // n=4 时，绘制一个方圆形 const n = 4 let m = n if (n > 100) m = 100 if (n < 0.00000000001) m = 0.00000000001 const r = size.width / 2 const w = size.width / 2 const h = size.height / 2 ctx.beginPath(); for (let i = 0; i < (2*r+1); i++) { const x = (i-r) + w const y = (Math.pow(Math.abs(Math.pow(r,m)-Math.pow(Math.abs(i-r),m)),1/m)) + h if (i == 0) ctx.moveTo(x, y) else ctx.lineTo(x, y) } for (let i = (2*r); i < (4*r+1); i++) { const x = (3*r-i) + w const y = (-Math.pow(Math.abs(Math.pow(r,m)-Math.pow(Math.abs(3*r-i),m)),1/m)) + h ctx.lineTo(x, y) } ctx.closePath() ctx.fill() }})
这样一个类小米LOGO的平滑圆角矩形就绘制实现了，成果如下
总结
本文其实次要通过这个案例想说，有些事物看似简略然而外部的艰苦和繁冗是其他人无奈设想的，正如小米LOGO的设计理念，LOGO不单单是状态上扭转更是赋予了一种动静的生机。要想实现一个平滑圆角不仅仅是一句border-radius就能实现的事件，在平时的做人处事上亦是如此。对待事物要有本人的想法深度思考，不能随声附和。好了好了....扯多了。就说到这吧。