使用canvas绘图实现圆形进度条，附赠彩色小心心特效
实现进度条效果就是每次画一个角度的圆形，下一次清除画布，重新绘制，这样就能像动画一样显示进度了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手写圆形进度条+漂浮彩色小心心特效</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<style>
body {
background: #607d8b!important;
margin: 0;
}
.ddd {
position: fixed;
width: 210px;
height: 210px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,.1);
background: #fff;
padding: 20px;
text-align: center;
line-height: 210px;
font-size: 60px;
color: rgba(0,0,0,.3);
overflow: hidden;
}
canvas {
position: absolute;
top: 20px;
left: 20px;
}
.boll {
position: absolute;
border-radius: 50%;
opacity: 0;
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
animation: boll 3s ease-out;
cursor: pointer;
width: 40px;
height: 40px;
line-height: 40px;
bottom: -40px;
}
.boll:hover {
transform: scale(1.5);
border: 3px solid #fff;
}
@keyframes boll{
from {
bottom: -40px;
opacity: 0;
}
5% {
bottom: 0px;
opacity: 0.8;
}
to {
bottom: 210px;
opacity: 0;
display: none;
}
}
</style>
<body>
<div class="ddd">
<span id="number">0%</span>
<canvas width="210" height="210" id="ccb"></canvas>
<canvas width="210" height="210" id="ccc"></canvas>
<div class="boll" style="width: 40px; height: 40px; bottom: -40px; left: 80px"></div>
</div>
</body>
<script>
//在ccb上绘图
var c1=document.getElementById("ccb");
var ctx1=c1.getContext("2d");
//设置边框宽度
ctx1.lineWidth = 8;
//边框颜色
ctx1.strokeStyle = '#3af';
//进度条起始位置
var i = -0.5;
//进度显示
var number = 0;
//心或圆形渲染速度
var tt = 0;
//心和圆形切换
var glo = true;
//循环
setInterval(function() {
//开始画图
ctx1.beginPath();
//清除画布内容
ctx1.clearRect(0,0,210,210);
tt++;
i = i + 0.001;
number = number + 0.05;
$("#number").text(number.toFixed(1) + '%');
ctx1.arc(105,105,100,-0.5*Math.PI,i*Math.PI);
ctx1.stroke();
if(tt % 10 == 0) {
var size = Math.round(Math.random() * 18 + 32);
var rsize = Math.round(Math.random() * 60);
var left = Math.round(Math.random() * 100 + 50);
var r = Math.round(Math.random() * 255);
var g = Math.round(Math.random() * 255);
var b = Math.round(Math.random() * 255);
var o = Math.random();
//$("#number").css('color', 'rgba('+ r + ',' + g + ',' + b + ',' + o +')').css('font-size', size + 'px');
if(glo) {
//心
$(".ddd").append('<div class="boll" style="font-size: '+ size +'px;left: '+ left +'px;color:rgba('+ r + ',' + g + ',' + b + ',' + o +')"><i class="fa fa-heart"></i></div>');
} else {
//圆形
$(".ddd").append('<div class="boll" style="width: '+ rsize +'px; height: '+ rsize +'px;left: '+ left +'px;background:rgba('+ r + ',' + g + ',' + b + ',' + o +')"></div>');
}
}
if(i > 1.5) {
//转完一圈重新开始
i = -0.5;
number = 0;
}
}, 10);
$(".ddd").click(function(e) {
glo = !glo;
});
//进度条背景灰色圆形
var c=document.getElementById("ccc");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = 8;
ctx.strokeStyle = 'rgba(0,0,0,.1)';
ctx.arc(105,105,100,0,2*Math.PI);
ctx.stroke();
</script>
</html>
