介绍 & lt; ! DOCTYPE html>
& lt; html>
& lt; head>
,& lt; meta charset=皍tf-8"比;
画布,& lt; title>环形进度条& lt;/title>
,& lt; style>
身体,{
,background - color: # 000;
,text-align:中心;
,}
,.canvas1 {
,margin-top: 100 px;
,显示:inline-block;
,背景颜色:# FFF;
,}
,& lt;/style>
& lt;/head>
& lt; body>
,& lt; canvas id=癱ircle_process",类=癱anvas1"祝辞& lt;/canvas>
,& lt; script>
,/*
,需求:环形,一周分为10个片段,根据进度去走的一个状态
,技术选型:canvas (挑战加熟悉)
,思路:
01大敌;首先中间的文字部分不用说,使用帆布的画文字。
,02年圆形是个规则图形,那么为了避免画不规则图形,我们可以用圆和矩形来重叠出效果。
,一只大的灰色背景圆
,b只小一圈的白色背景圆
,c只以同心圆的圆心为圆心,小圆为半径为半径复制画十个小的矩形
,*/,//初始化动画变量
,var requestAnimationFrame =, window.requestAnimationFrame | |, window.msRequestAnimationFrame | |, window.mozRequestAnimationFrame | |, window.webkitRequestAnimationFrame;
,var cancelAnimationFrame =, window.cancelAnimationFrame | |, window.msCancelAnimationFrame | |, window.mozCancelAnimationFrame | |, window.webkitCancelRequestAnimationFrame;
,//初始化当前进度数
,var curPercentCount =, 0;
,//获取画布对象,设置画布大小
,var oC =, document.querySelector (& # 39; # circle_process& # 39;);=,oC.width 300;=,oC.height 300;
,//获取帆布执行上下文
,var ctx =, oC.getContext (& # 39; 2 d # 39;);
,//定义小矩形的个数
,var miniRectCount =, 10;
,//定义圆心位置
,var cirCenter =, {
,x: oC.width/2,
y: oC.height/2
,};
,//定义小矩形的大小rectSize
,var rectSize =, {
,宽度:0,
高度:0
,};
,//圆对象构造函数
,function 圆(中心、半径){=,this.center 中心;=,this.radius 半径;
,}
,//小矩形对象构造函数
,function MiniRect(长度、宽度){=,this.length 长度;=,this.width 宽度;
,}
,//角度转换成弧度的函数
,function d2a (angleInt) {
,return angleInt * Math.PI /, 180;
,}
,//百分比转换角度函数(这里减90因为arc0度是从右侧开始的)
,function percentTurn (percentFloat) {
,return percentFloat *, 360,/, 100,安康;90;
,}
,//画当前百分比扇形的方法
,function drawFanForPercent (percentFloat) {
,ctx.beginPath ();
,ctx.moveTo (cirCenter.x cirCenter.y);
,ctx.lineTo (oC.width/2 (oC.height-baseCircle.radius * 2)/2);
,ctx.arc (cirCenter.x cirCenter.y、baseCircle.radius d2a (-90), d2a (percentTurn (percentFloat)));=,ctx.fillStyle & # 39;浅绿色# 39;;
,ctx.fill ();
,ctx.closePath ();
,}
,//画圆的函数
,function drawArc(中心、半径、开始、结束、类型、颜色){=,,start start | |, 0;
,最终获得=,最终获得| |,360;
,ctx.beginPath ();
,ctx.arc (center.x center.y,半径,d2a(开始),d2a(结束));=,ctx.fillStyle 颜色;=,ctx.strokeStyle 颜色;
,如果(! !类型){===,(type & # 39;填补# 39;),,,,ctx.fill ();===,(type & # 39;中风# 39;),,,,ctx.stroke ();
,}
,ctx.closePath ();
,}
,//画文字的函数
,function drawPercentText(文本、percentInt) {
,ctx.beginPath ();=,ctx.fillStyle & # 39;浅绿色# 39;;
,ctx.font=癷talic small-caps bold 40 px Calibri";=,ctx.textAlign & # 39;中心# 39;;
,ctx.fillText(文本、cirCenter.x circenter.y - 18100);
,ctx.closePath ();
,ctx.beginPath ();=,ctx.fillStyle & # 39;浅绿色# 39;;
,ctx.font=癷talic small-caps bold 60 px Calibri";=,ctx.textAlign & # 39;中心# 39;;
,ctx.fillText (percentInt + & # 39; % & # 39;, cirCenter.x, cirCenter.y + 40100);
,ctx.closePath ();
,}
,//画小方块的方法
,function drawMiniRect(曾经繁荣、宽度、高度、axisPoint rotateAngle) {
,/*
,ctx.beginPath ();
,//平移,画出第一个
,ctx.save ();
,ctx.translate (startPoint.x startPoint.y);=,ctx.fillStyle & # 39; # FFF& # 39;;
,ctx.fillRect (0, 0, rectSize.width rectSize.height);
,ctx.restore ();
,ctx.closePath ();
,//这种先平移画出在旋转的思路是错的,画之后就不能转了
,ctx.save ();
,ctx.translate (axisPoint.x axisPoint.y);
,ctx.rotate (rotateAngle);
,ctx.restore ();
,*/,ctx.save ();
,ctx.translate (axisPoint.x axisPoint.y);,/*画布平移到圆的中心*/,ctx.rotate (d2a (rotateAngle)),,/*旋转*//*画*/,ctx.beginPath ();=,ctx.fillStyle & # 39; # FFF& # 39;;
,ctx.fillRect (startPoint.x startPoint.y、rectSize.width rectSize.height);
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章将为大家详细讲解有关帆布怎么实现环形进度条效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
这里就选画布来简单写一下先上代码,然后在说一说需要注意的点:
