/*
刚刚开发完一套移动端答题活动，中间用到了canvas来绘制圆形进度条。
绘制进度条时用到了canvas的颜色、样式、阴影、路径、属性、线条样式和一些方法来进行绘制。
canvas在HTML5中，是一门很重要的功课，但想要掌握canvas，估计要下很深的功夫，在掌握的同时，做出各种需求有点头大哈哈，在这canvas只是弱弱的小白一枚哈哈。
圆形进度条时间倒计时60秒开始，到结束0进度条结束，答题结束。
*/
<style>
#canvas{
border-radius:50%;
background:#ccccff;
box-shadow: 0px 0px 8px #ccccff;
}
</style>
<ul id="circle">
<li id="0"><canvas id="canvas" width="60" height="60"></canvas></li>
</ul>
<script>
window.onload = function(){
var bplList = document.getElementById('circle').getElementsByTagName("li");
for (let i = 0; i < bplList.length; i++) {
var progress = Number(bplList[i].id); //li的id进度数据
bplCircle(bplList[i].childNodes[0], progress, "canvas" + i); //bplCircle (canvas, int);
}
function blueCircle(n) {
context.save();
context.strokeStyle = "#205d80";//设置描边样式
context.lineWidth = 2;//设置线宽
context.beginPath();//路径开始
context.arc(centerX, centerY,28,-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.lineWidth = 20;//设置线宽
context.strokeStyle = "#ccccff";
//context.arc(centerX, centerY, 30, 0, Math.PI * 2, false);
context.stroke();
context.closePath();
context.restore();
}
//文字绘制
function text(n) {
context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
context.strokeStyle="#306c8d"; //设置描边样式
context.font = "30px Arial"; //设置字体大小和字体
//绘制字体，并且指定位置
if(n.toFixed(0) < 10){
context.strokeText(n.toFixed(0) + "", centerX-7.5, centerY + 11);
}else{
context.strokeText(n.toFixed(0) + "", centerX-15, centerY + 11);
}
context.stroke(); //执行绘制
context.restore();
}
function spzCircle(nowProgress, canvasDom) {
var canvas = canvasDom; //获取canvas元素
context = canvas.getContext('2d'), //获取画图环境，指明为2d
centerX = canvas.width / 2, //Canvas中心点x轴坐标
centerY = canvas.height / 2, //Canvas中心点y轴坐标
rad = Math.PI * 2 / 60; //将360度分成60份，那么每一份就是rad度
context.clearRect(0, 0, canvas.width, canvas.height);
whiteCircle();
text(nowProgress);
blueCircle(nowProgress);
}
function bplCircle(canvasDom, progress, canvasInterval) {
var nowProgress = 61;
canvasInterval = setInterval(function() {
if (nowProgress == progress) {
clearInterval(canvasInterval);
} else {
nowProgress--;
spzCircle(nowProgress, canvasDom);
}
}, 1000);
}
}
</script>
转载于:https://www.cnblogs.com/yscode/p/10057263.html
相关资源：canvas实现弧形可拖动进度条效果
