大佬教程收集整理的这篇文章主要介绍了使用canvas实现带圆点的进度条，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
使用canvas实现如上图所示的进度条
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Canvas实现圆点进度条</title>
<style>
.canvasArea{ margin:200px auto; height:400px; width:400px; position: relative; padding:10px; }
.canvasArea p{ position:absolute; width:100%; height: 100%; line-height:400px; text-align:center; font-size:24px;}
canvas{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#perValue{ font-weight:bold; color:red; padding-right:10px;}
</style>
</head>
<body>
<div class="canvasArea" style="">
<p><span id="perValue">0</span></p>
<canvas width="400" height="400" id="mask" style="z-index:9"></canvas>
<canvas width="400" height="400" id="bg"></canvas>
<canvas width="400" height="400" id="circle" style="z-index:10"></canvas>
</div>
<script type="text/javascript">
(function(){
var progress = {
bgid:null,maskid:null,circlEID:null,x:0,y:0,radius:0,perV:0,load:0,bgctx:null,maskctx:null,circlectx:null,init:function(paramObj){
this.bgid = paramObj.bgid;
this.maskid = paramObj.maskid;
this.circlEID = paramObj.circlEID;
this.x = paramObj.x;
this.y = paramObj.y;
this.radius = paramObj.radius;
this.perV = paramObj.perV;
this.load = paramObj.initLoaded;
bgctx = document.querySELEctor(this.bgid).getContext("2d");
circlectx = document.querySELEctor(this.circlEID).getContext("2d");
maskctx = document.querySELEctor(this.maskid).getContext("2d");
},drawBgLayer:function(){
bgctx.beginPath();
bgctx.lineWidth = 8;
bgctx.strokeStyle = "#e5e5e5";
bgctx.arc(this.x,this.y,this.radius,(5/6)*Math.PI,(1/6) * Math.PI,falsE);
bgctx.stroke();
},drawMaskLayer:function(){
var draw = seTinterval(function(){
if (progress.load<=progress.perV) {
progress.drawCircle();
progress.load += 1;
} else {
clearInterval(draw);
draw = null;
}
},10);
},drawCircle:function(){
document.querySELEctor("#perValue").innerHTML = this.load;
var vv = this.load/100*(4/3)+(5/6);
if(vv>2){
vv = vv-2;
}
var loaded = vv*Math.PI;
maskctx.clearRect (0,400,400);
maskctx.beginPath();
maskctx.lineWidth = 8;
maskctx.strokeStyle = '#00acee';
maskctx.arc(this.x,loaded,falsE);
maskctx.stroke();
var para = vv*3.14;
var px = this.x+this.radius*Math.cos(para-0.03);
var py = this.y+this.radius*Math.sin(para-0.03);
circlectx.clearRect (0,400);
circlectx.beginPath();
circlectx.arc(px,py,8,360,falsE);
circlectx.fillStyle = '#00acee';
circlectx.fill();
}
}
var paramObj = {
bgid:'#bg',maskid:'#mask',circlEID:'#circle',x:200,y:200,radius:180,perV:80,initLoaded:0,}
progress.init(paramObj);
progress.drawBgLayer();
progress.drawMaskLayer();
})();
</script>
</body>
</html>
主要的难点在于进度条上的那个圆点，要跟据圆心坐标和半径以及圆心角度计算出那个圆点的圆心坐标来；
另附上求圆上任意一点坐标的公式：
其它关于canvas以及arc函数相关请参考w3cschool的说明文档： HTML5 canvas arc() 方法已知圆心坐标为:(x,y)，半径为r，圆心角的角度为a；
则圆上点的坐标为：X = x +r*cos(a*3.14/180); Y = y+r*sin(a*3.14/180);
以上是大佬教程为你收集整理的使用canvas实现带圆点的进度条全部内容，希望文章能够帮你解决使用canvas实现带圆点的进度条所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。