canvas实现百分比loading加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="background-color:#000000;">
<canvas width="300" height="300" style=" margin-left: 500px;margin-top: 200px;"></canvas>
<script>
var can = document.getElementsByTagName('canvas')[0].getContext('2d');
var num = -1;
var timer;
var color = can.createLinearGradient(0,300,300,0);
color.addColorStop(0,'red');
color.addColorStop(.1,'orange');
color.addColorStop(.2,'yellow');
color.addColorStop(.3,'green');
color.addColorStop(.4,'blue');
color.addColorStop(.5,'purple');
color.addColorStop(.6,'red');
color.addColorStop(.7,'orange');
color.addColorStop(.8,'yellow');
color.addColorStop(.9,'green');
color.addColorStop(1,'blue');
function loading(){
can.clearRect(0,0,300,300);
can.save();
can.translate(150,150);
can.beginPath();
can.arc(0,0,100,0,Math.PI*2);
num ++;
if (num>=1000){
clearInterval(timer);
}
can.font = '30px 宋体';
can.textAlign = 'center';
can.strokeStyle = '#fff';
can.strokeText((num/10)+'%',0,0);
can.closePath();
can.beginPath();
can.arc(0,0,100,-Math.PI/2,(Math.PI/50 *num/10)-Math.PI/2);
can.lineWidth = 10;
can.strokeStyle = color;
can.stroke();
can.closePath();
can.restore();
}
loading();
timer = setInterval(function () {
loading();
},10)
</script>
</body>
</html>