介绍 & lt;帆布id=癱anvas"宽度=?00”;身高=?00“比;
& lt; p>抱歉,您的浏览器不支持canvas
& lt;/canvas> 函数toCanvas (id、进步){帆布进度条
画布var=. getelementbyid (id),
ctx=canvas.getContext (“2 d"),
%=进步,最终百分比circleX=画布。宽/2,中心x坐标circleY=画布。高度/2,中心y坐标半径=100,圆环半径线宽=5,圆形线条的宽度字形大?20;字体大小
两端圆点
函数smallcircle1 (cx, cy, r) {
ctx.beginPath ();//ctx。函数(cx + r, cy);ctx。线宽=1;
ctx。fillStyle=& # 39; # 06 a8f3& # 39;;
ctx。弧(cx, cy, r, 0, Math.PI * 2);
ctx.fill ();
}函数smallcircle2 (cy残雪,r) {
ctx.beginPath ();//ctx。函数(cx + r, cy);ctx。线宽=1;
ctx。fillStyle=& # 39; # 00 f8bb& # 39;;
ctx。弧(cx, cy, r, 0, Math.PI * 2);
ctx.fill ();
}画圆
函数圈(cx, cy, r) {
ctx.beginPath ();//ctx。函数(cx + r, cy);ctx。线宽=线宽;
ctx。strokeStyle=& # 39; # eee # 39;;
ctx。弧(cy残雪,r,数学。π* 2/3,数学。π* 1/3);
ctx.stroke ();
}画弧线
职能部门(cy残雪,r, startAngle endAngle,反){
ctx.beginPath ();//ctx。函数(cx, cy + r);//从圆形底部开始画ctx。线宽=线宽;//渐变色——可自定义
var linGrad=ctx.createLinearGradient (
circleX-radius-lineWidth、circleY circleY circleX +半径+线宽
);
linGrad.addColorStop (0.0, & # 39; # 06 a8f3& # 39;);//linGrad.addColorStop (0.5, & # 39; # 9 bc4eb& # 39;);linGrad.addColorStop (1.0, & # 39; # 00 f8bb& # 39;);
ctx。strokeStyle=linGrad;圆弧两端的样式ctx。lineCap=& # 39;轮# 39;;圆弧ctx.arc (
残雪,cy, r,
(Math.PI * 2/3), (Math.PI * 2/3) + endAngle/100 * (Math.PI * 5/3),
假
);
ctx.stroke ();
}刷新
函数加载(){如果(过程祝辞=%){
clearInterval (circleLoading);
}清除帆布内容ctx。clearRect (0, 0, circleX * 2, circleY * 2);中间的字ctx。字体=字形大小+ & # 39;px 4 # 39;;
ctx。textAlign=& # 39;中心# 39;;
ctx。textBaseline=& # 39;中间# 39;;
ctx。fillStyle=& # 39; # 999 & # 39;;
ctx.fillText (parseFloat(流程).toFixed (0) + & # 39; % & # 39;, circleX, circleY);
圆形圆(circleX circleY,半径);
圆弧部门(circleX circleY,半径,数学。π* 2/3,过程);
两端圆点smallcircle1 (150 + Math.cos (2 * Math.PI/360 * 120 * 100, 150 + sin (2 * Math.PI/360 * 120 * 100, 5);
smallcircle2 (150 + Math.cos (2 * Math.PI/360 *(120 +过程* 3))* 100,150 + sin (2 * Math.PI/360 *(120 +过程* 3))* 100,5);控制结束时动画的速度
如果(流程/百分比比;0.90){
过程+=0.30;
}else if(流程/百分比比;0.80){
过程+=0.55;
}else if(流程/百分比比;0.70){
过程+=0.75;
其他}{
过程+=1.0;
}
}var过程=0.0;进度
var circleLoading=窗口。setInterval(函数(){
加载();
},20);
}
第二部分,调用封装好的代码:
toCanvas(& # 39;帆布# 39;,50);
这篇文章主要介绍了画布上实现圆弧,圆环进度条的案例分析,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
此方法通过帆布绘制圆形的方法来实现动态圆环进度条,直接上代码,疑问请看注释:
HTML代码如下,在页面里创建一个画布即可:,
JS分两大部分,
第一部分实现整体功能,第二部分调用:
第一部分:
第一部分功能原理大概是,画两个圆,一个是底色圆,第二个是动态加载的圆弧,进度通过定时器加载;颜色加渐变色;
感谢你能够认真阅读完这篇文章,希望小编分享画布上实现圆弧,圆环进度条的案例分析内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!
