前端实现loading百分比效果的?

zhaoqihao
浏览 2298回答 3
3回答

一杯2块的奶茶

嗯,那个canvas画圈

慕姐7500319

/*HTML中先创建一个Canvas画布*/ var canvas = document.getElementById('gameCanvas'); //获取当前画布 //设置画布宽高 canvas.width = 600; canvas.height = 400; var ctx = canvas.getContext('2d'); //创建绘图上下文(画笔)对象 ctx.lineWidth = 10;        //描边的粗细 ctx.strokeStyle = '#aaa';    //描边的颜色 //绘制当前加载的圆形进度条 ctx.beginPath();    //开始绘制路劲 //这个角度位置以三点钟方向为起点开始的,计算公式为:角度*π/180; var startAngle = -90*Math.PI/180; //开始角度的位置 var endAngle = (-90+360*progress/100)*Math.PI/180; //结束角度 ctx.arc(canvasWidth/2,canvasHeight/2,60,startAngle,endAngle);    //绘制弧线,(X坐标,Y坐标,半径,开始角,结束角) ctx.stroke(); //对路径进行描边
打开App,查看更多内容
随时随地看视频慕课网APP