ui的设计是这样的：使用场景是在手机app中加载一些模块时显示加载进度。思路比较简单，直接看代码注释：interfaceParams{/**canvasdom*/dom:any,/**color*/color:string,size?:number,callback?:Function/**radius表示进度的圆的比例（比率）*/opaqueRate?:number/**挖掘的圆半径（比率）*/excavatedRate?:number}/***显示进度的饼图*/constappDownloadRate=(params:Params)=>{const{dom,color,size,callback,opaqueRate=0.35,excavatedRate=0.40}=params;常量画布=dom；常量L=大小||dom.offsetWidth;constl_moiety=L/2;return{setRate(value:number){canvas.width=Lcanvas.height=Lconstctx=canvas.getContext("2d");ctx.fillStyle=颜色；//设置坐标零ctx.translate(l_moiety,l_moiety);//先画一个剔除圆ctx.beginPath()ctx.arc(0,0,L*excavatedRate,90*Math.PI/180,450*Math.PI/180);ctx.lineTo(0,l_moiety)ctx.lineTo(l_moiety,l_moiety)ctx.lineTo(l_moiety,-l_moiety)ctx.lineTo(-l_moiety,-l_moiety)ctx.lineTo(-l_moiety,l_moiety)ctx.lineTo(0,l_moiety)ctx.closePath()ctx.fill()//绘制另一个饼图显示进度（顺时针方向）ctx.beginPath()ctx.moveTo(0,0);//逆时针旋转90度ctx.rotate(-90*Math.PI/180)//左右镜像ctx.scale(1,-1)ctx.arc(0,0,L*opaqueRate,0,((100-值)*3.6)*Math.PI/180);ctx.closePath()ctx.fill();if(value===100){this.done()}},done(){setTimeout(()=>{canvas.style.display='none'},200)if(callback)callback()}}}
