SOURCE

console 命令行工具 X clear

                    
>
console
function drawCircle (canvasId,percent,lineWidth,lineColor,step){
	var canvas = document.getElementById(canvasId),
		ctx = canvas.getContext("2d"),
		canvasWidth = canvas.getBoundingClientRect().width * 2,
		canvasHeight = canvas.getBoundingClientRect().height * 2,
		lineWidth = lineWidth || 6,
		raf = null,
		radian = Math.PI * 2 * percent;
	
	canvas.width = canvasWidth;
	canvas.height = canvasHeight;
	canvas.style.transform = 'rotate(-' + 90 + 'deg)';
	ctx.lineWidth = lineWidth;

	var angleToRadian = function(angle){
		return  Math.PI / 180 * angle;
	}

	var _draw = function(radian,lineColor){
		ctx.strokeStyle = lineColor;
		ctx.beginPath();
		ctx.arc(canvasWidth  / 2, canvasHeight / 2, canvasWidth / 2 - lineWidth * 2, 0, radian);
		ctx.stroke();
	};
	_draw(Math.PI * 2, '#36271c');
	if(radian <= 0) return;
	var totalAngle = 360 * percent;
	var currentAngle = 0;
	var step = step || 1;
	var _loop = function(){
		if(currentAngle >= totalAngle){
			cancelAnimationFrame(raf);
			return;
		}
		currentAngle += step;
		_draw(angleToRadian(currentAngle),lineColor);
		raf = requestAnimationFrame(_loop);
	};
	_loop();
}

drawCircle('can', 0.5, 18, '#fdb00f',10);
drawCircle('can2', 0.8, 18, '#56beff',10);
<canvas id="can"></canvas>
<canvas id="can2"></canvas>
canvas{
	width: 200px;
	height: 200px;
}