小米的200万可不是那么好赚的！
时间：2023-03-30 22:21:34
CSS
前言看完小米前两天发布的全新LOGO，相信大部分人的反应和我一样吧？？？就是这样！！！.然后我从网上找到了小米聘请的日本国际设计师原研哉来讲解小米新LOGO的设计理念。看完这句话，我的第一反应是知名设计师的设计理念比简单的设计更有价值。这200W不亏！！然后我改变了主意，认为我可以这样做。我没有200w的idea，难道我比葫芦还不行吗？！于是着手用css实现一个wave来给小伙伴们炫耀一下。照你说的做不是很简单吗？网上说了那么多，其实就是border-radius的东西，分分钟画给他看。但事实真的如此吗？总感觉事情没有那么简单。所以我现在用网上的方法画了一个LOGO，效果如下：各位看出来有什么问题吗？你觉得这有什么不同吗？都是圆角矩形？没关系。接下来我们把它和小米的LOGO放在一起。你看见了吗？正确的！！这是正确的！！被你发现了，小米的圆角矩形是光滑圆润的。那么问题来了，用css怎么办呢？我可以只发图片吗？不！！答案是否定的，其实还有一个有趣的东西，那就是“PaintingAPI”。通过PaintingAPI，可以调用css中的paint函数，然后通过JavaScript定义一个PaintWorklet来加载你注册的画板。事实上，您可以通过JavaScript绘制任何您想要的图形。具体介绍可以查看这些大佬的文章：https://juejin.cn/post/694581...https://zhuanlan.zhihu.com/p/...https://www.zhangxinxu.com/wo...进入正题首先定义css和html
.box{background:#ff6900;-webkit-mask-image:paint(smooth-corners);宽度：100px；高度：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时,画一个方圆constn=4letm=nif(n>100)m=100if(n<0.00000000001)m=0.00000000001constr=size.width/2constw=size.width/2consth=size.height/2ctx.beginPath();for(leti=0;i<(2*r+1);i++){constx=(i-r)+wc??onsty=(Math.pow(Math.abs(Math.pow(r,m)-Math.pow(Math.abs(i-r),m)),1/m))+hif(i==0)ctx.moveTo(x,y)elsectx。lineTo(x,y)}for(设i=(2*r);我<(4*r+1);i++){constx=(3*r-i)+wc??onsty=(-Math.pow(Math.abs(Math.pow(r,m)-Math.pow(Math.abs(3*r-i),m)),1/m))+hctx.lineTo(x,y)}ctx.closePath()ctx.fill()}})这样一个小米LOGO就画出了光滑的圆角矩形，效果总结如下。其实这篇文章主要是想通过这个案例说说，有些事情看似简单，但其内在的艰辛和复杂程度是别人想象不到的。正是造型的变化，赋予了它一种动感的生命力。完成一个光滑的圆角，不仅是border-radius可以做到的事情，也是做人做事的惯常做法。看事情要深思熟虑自己的想法，不能随波逐流。好吧好吧。。废话太多了。目前为止就这样了。
