canvas的简单圆形进度条
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | window.onload = function (){ function arc(canvas,number){ var canvas = document.getElementById(canvas), //获取canvas元素 context = canvas.getContext( '2d' ), //获取画图环境,指明为2d centerX = canvas.width/2, //Canvas中心点x轴坐标 centerY = canvas.height/2, //Canvas中心点y轴坐标 rad = Math.PI*2/100, //将360度分成100份,那么每一份就是rad度 speed = 0.1; //加载的快慢就靠它了 //绘制蓝色外圈 function blueCircle(n){ whiteCircle(); context.save(); context.strokeStyle = "#44C7F4" ; //设置描边样式 context.lineWidth = 10; //设置线宽 context.beginPath(); //路径开始 context.arc(centerX, centerY, 100 , -Math.PI/2, -Math.PI/2 +n*rad, false ); //用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针) context.stroke(); //绘制 context.closePath(); //路径结束 context.restore(); } //绘制白色外圈 function whiteCircle(){ context.save(); context.beginPath(); context.strokeStyle = "white" ; context.lineWidth = 10; //设置线宽 context.arc(centerX, centerY, 100 , 0, Math.PI*2, false ); context.stroke(); context.closePath(); context.restore(); } //百分比文字绘制 function text(n){ context.save(); //save和restore可以保证样式属性只运用于该段canvas元素 context.fillStyle= "#44C7F4" ; context.font = "40px Arial" ; //设置字体大小和字体 //绘制字体,并且指定位置 context.fillText(n.toFixed(0)+ "%" , centerX-25, centerY+15); context.stroke(); //执行绘制 context.restore(); } //动画循环 function drawFrame(){ window.requestAnimationFrame(drawFrame, canvas); context.clearRect(0, 0, canvas.width, canvas.height); whiteCircle(); text(speed); blueCircle(speed); if (parseInt(speed) == number) return ; speed += 1; } drawFrame() } arc( "canvas" ,50); } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步