教你用CSSPaintingAPI画小米新logo，但是border-radius画不出来radius能写个超椭圆吗？什么是超椭圆？超椭圆又称拉梅曲线，是一种类似于椭圆的闭合曲线，它保留了椭圆的长轴、短轴和对称性等特点。如何使用CSSPaintingAPI有了这个东西，就可以用js直接绘制元素的背景、边框或者内容了。现在开始写一个javascript文件huizhi.js代码内容如下constPrint_demo=class{paint(ctx,size){ctx.fillStyle='green'constn=4letm=nconstr=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(leti=(2*r);i<(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()}}registerPaint('hua',Print_demo);看到上面的代码内容，定义了一个Print_demo类，就是画一个超级椭圆的方法，里面的方法就是这个公式的实现，可以在画布上画出这个形状，但是这个api中的ctx与canvas元素的context对象ctx不同，这里就不说了。然后使用registerPaint方法注册Print_demo，取名为hua使用方法1.导入这个js2。调用CSS.paintWorklet.addModule('./huizhi.js');3.css文件中，background:paint(hua)准备好了，就是这个形状，一个超级椭圆，需要调整上面的n参数，就可以有这个东西，跟小米的差不多，都可以写各种图案随心所欲
