效果图1:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Canvas progress</title>
  6. </head>
  7. <body>
  8. <canvas id="process" width="200" height="200"></canvas>
  9. <script>
  10. (function (){
  11. var c = document.getElementById('process'),
  12. process = 0,
  13. ctx = c.getContext('2d');
  14. // 画灰色的圆
  15. ctx.beginPath();
  16. ctx.arc(100, 100, 80, 0, Math.PI*2);
  17. // ctx.closePath();
  18. ctx.strokeStyle = 'green';
  19. ctx.stroke();
  20. // 画红色的圆
  21. ctx.beginPath();
  22. ctx.arc(100, 100, 70, 0, Math.PI*2);
  23. // ctx.closePath();
  24. ctx.fillStyle = 'red';
  25. ctx.fill();
  26. function animate(){
  27. requestAnimationFrame(function (){
  28. process = process + 1;
  29. drawCricle(ctx, process);
  30. if (process < 90) {
  31. animate();
  32. }
  33. });
  34. }
  35. function drawCricle(ctx, percent){
  36. // 画进度环
  37. ctx.beginPath();
  38. ctx.moveTo(100, 100);
  39. ctx.arc(100, 100, 80, Math.PI * 1.5, Math.PI * (1.5 + 2 * percent / 100 ));
  40. ctx.closePath();
  41. ctx.fillStyle = 'yellow';
  42. ctx.fill();
  43. // 画内填充圆
  44. ctx.beginPath();
  45. ctx.arc(100, 100, 60, 0, Math.PI * 2);
  46. ctx.closePath();
  47. ctx.fillStyle = '#fff';
  48. ctx.fill();
  49. // 填充文字
  50. ctx.font = "bold 20pt Microsoft YaHei";
  51. ctx.fillStyle = '#333';
  52. ctx.textAlign = 'center';
  53. ctx.textBaseline = 'middle';
  54. ctx.moveTo(100, 100);
  55. ctx.fillText(process + '%', 100, 100);
  56. }
  57. animate();
  58. }());
  59. </script>
  60. </body>
  61. </html>

 

 

效果图2:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Canvas progress</title>
  6. </head>
  7. <body>
  8. <canvas id="process" width="300" height="300"></canvas>
  9. <script>
  10. (function (){
  11. var c = document.getElementById('process'),
  12. process = 0,
  13. ctx = c.getContext('2d');
  14. function animate(){
  15. requestAnimationFrame(function (){
  16. process = process + 1;
  17. drawCricle(ctx, process);
  18. if (process < 75) {
  19. animate();
  20. }
  21. });
  22. }
  23. function drawCricle(ctx, percent){
  24. // 画进度环
  25. ctx.beginPath();
  26. ctx.moveTo(100, 100);
  27. ctx.arc(100, 100, 80, Math.PI * 1.5, Math.PI * (1.5 + 2 * percent / 100 ));
  28. ctx.closePath();
  29. ctx.fillStyle = '#108EE9';
  30. ctx.fill();
  31. // 画第一层灰色的圆
  32. ctx.beginPath();
  33. ctx.arc(100, 100, 70, 0, Math.PI*2);
  34. // ctx.closePath();
  35. ctx.fillStyle = '#ededed';
  36. ctx.fill();
  37. // 画第二层白色的圆
  38. ctx.beginPath();
  39. ctx.arc(100, 100, 65, 0, Math.PI*2);
  40. // ctx.closePath();
  41. ctx.fillStyle = '#fcfcfc';
  42. ctx.fill();
  43. // 画内填充圆
  44. ctx.beginPath();
  45. ctx.arc(100, 100, 55, 0, Math.PI * 2);
  46. ctx.closePath();
  47. ctx.fillStyle = '#FAFCFC';
  48. ctx.fill();
  49. // 画灰色的框
  50. ctx.beginPath();
  51. ctx.arc(100, 100, 55, 0, Math.PI*2);
  52. // ctx.closePath();
  53. ctx.strokeStyle = '#f2f2f2';
  54. ctx.stroke();
  55. // 填充文字
  56. ctx.font = "bold 20pt Microsoft YaHei";
  57. ctx.fillStyle = '#DA4816';
  58. ctx.textAlign = 'center';
  59. ctx.textBaseline = 'middle';
  60. ctx.moveTo(100, 100);
  61. ctx.fillText(process + '%', 100, 80);
  62. ctx.fillStyle = '#aaa';
  63. ctx.font="10px Georgia";
  64. ctx.fillText("销售目标完成度",100,100);
  65. // ctx.font="10px Georgia";
  66. ctx.fillText("集团内排名",100,120);
  67. ctx.fillStyle = '#DA4816';
  68. ctx.font="10px Georgia";
  69. ctx.fillText("1",100,140);
  70. }
  71. animate();
  72. }());
  73. </script>
  74. </body>
  75. </html>