canvas绘制圆环

<canvas class="process" width="48px" height="48px">15%</canvas>

<script type="text/javascript">
 drawProcess()
function drawProcess() {
    $('canvas.process').each(function() {
 var text = $.trim($(this).text());  var process = text.substring(0, text.length - 1);  var canvas = this;  var context = canvas.getContext('2d');  context.clearRect(0, 0, 48, 48);  context.beginPath();  context.moveTo(24, 24);  context.arc(24, 24, 24, 0, Math.PI * 2, false);  context.closePath();  context.fillStyle = '#ddd';  context.fill();  context.beginPath();  context.moveTo(24, 24);  context.arc(24, 24, 24, 0, Math.PI * 2 * process / 100, false);  context.closePath();  context.fillStyle = '#e74c3c';  context.fill();  context.beginPath();  context.moveTo(24, 24);  context.arc(24, 24, 21, 0, Math.PI * 2, true);  context.closePath();  context.fillStyle = 'rgba(255,255,255,1)';  context.fill();  //context.beginPath();  //context.arc(24, 24, 18.5, 0, Math.PI * 2, true);  //context.closePath();  //context.strokeStyle = '#ddd';  //context.stroke();  //context.font = "bold 9pt Arial";  //context.fillStyle = '#e74c3c';  //context.textAlign = 'center';  //context.textBaseline = 'middle';  //context.moveTo(24, 24);  //context.fillText(text, 24, 24)  }) } </script>

转载于:https://www.cnblogs.com/lglijing/p/3912344.html