使用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>