如何使用canvas同时绘制多个并列进度条
先上效果:
主要是去熟悉下canvas的一些属性方法,主要应用的属性方法如下:
beginPath() 方法:开始一条路径,或重置当前的路径;
closePath()方法:与上面的匹配,创建从当前点到开始点的路径;
moveTo(x,y)方法:开始一条路径,移动到位置(x,y);
arc(x,y,r,Math.PI * 1.5, Math.PI * (1.5 + 2 * percent / 100 )):创建弧/曲线(用于创建圆或部分圆)圆的中心的 x 坐标,y坐标,圆形半径,起始角(以弧度计),结束角(以弧度计);
文本类属性
.fillStyle:设置或返回用于填充绘画的颜色、渐变或模式
.fill():填充当前的图像(路径)。默认颜色是黑色(使用 fillStyle 属性来填充另一种颜色/渐变);
.textAlign:文本位置;.font:文字属性;textBaseline:设置或返回在绘制文本时的当前文本基线;
.fillText(text,x,y):在位置(x,y)处显示text内容
具体代码实现:
<div class="warn-canvas"></div>
//分辨率自适应调整 var canvas_left = 80;//圆环的偏移位置 var canvas_height = 100;//圆环的环境大小 if($(window).width()>1599){ canvas_left = 100; canvas_height = 140; } //红(80),橙,黄,蓝 var colorarr = ["#f14a65","#ffa042","#ffff69","#5a7ef3"]; var txtarr = ["致命","错误","警告","信息"]; $(function(){ var str = ""; for(var i=0;i<4;i++){ str+="<canvas id='process"+i+"' width='"+canvas_height+"' height='100'></canvas>" } $(".warn-canvas").html(str); for(var j=0;j<4;j++){ var process = 0; var ctx = document.getElementById("process"+j).getContext('2d'); // 画灰色的圆 ctx.beginPath(); ctx.arc(canvas_left, 30, 20, 0, Math.PI*2); ctx.closePath(); ctx.fillStyle = '#def3ff'; ctx.fill(); var per = j*20; animate(per,ctx,process,j); } }); function animate(per,ctx,process,i){ requestAnimationFrame(function (){ process = process + 1; drawCricle(ctx, process,i); //绘制图形的百分比(per) if (process < per) { animate(per,ctx,process,i); } }); } function drawCricle(ctx, percent,i){ // 画进度环 ctx.beginPath(); //开始一条路径,移动到位置 100,100 ctx.moveTo(canvas_left, 30); //创建弧/曲线(用于创建圆或部分圆)圆的中心的 x 坐标,y坐标,圆形半径,起始角(以弧度计),结束角(以弧度计) ctx.arc(canvas_left, 30, 20, Math.PI * 1.5, Math.PI * (1.5 + 2 * percent / 100 )); ctx.closePath(); ctx.fillStyle = colorarr[i]; ctx.fill(); // 画内填充圆 ctx.beginPath(); ctx.arc(canvas_left, 30, 14, 0, Math.PI * 2); ctx.closePath(); ctx.fillStyle = '#fff'; ctx.fill(); // 填充文字1 ctx.font = "10pt Microsoft YaHei"; ctx.fillStyle = '#929292'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.moveTo(20, 50); ctx.fillText(txtarr[i], 25, 20); ctx.fillText("0", 25, 40); }
期待各位读者的宝贵意见。