canvas实现圆形进度条

1<div class="canvas_box">
2  <canvas id="canvas" width="420" height="420" data-val="90"></canvas>
3  <div id="canvas_text">
4    <p class="s_title">预期年化利率</p>
5    <p class="s_value">
6      6<em>%</em>
7      <i>+9%</i>
8    </p>
9  </div>
10</div>
Copy

1.canvas_box {
2  position: relative;
3  display: block;
4  width: 210px;
5  height: 200px;
6  margin: 15px auto 0;
7  overflow: hidden;
8}
9
10.canvas_box #canvas,
11.canvas_box #canvas_text {
12  width: 210px;
13  height: 210px;
14  margin: 0 auto;
15  position: relative;
16  display: block;
17}
18
19.canvas_box #canvas_text {
20  top: -210px;
21}
22
23.canvas_box #canvas_text .s_title {
24  margin-top: 65px;
25  color: #6b6d7c;
26  text-align: center;
27  font-size: 14px;
28}
29
30.canvas_box #canvas_text .s_value {
31  margin-top: 20px;
32  text-align: center;
33  color: #ff5971;
34  font-size: 40px;
35  font-weight: 700;
36  position: relative;
37}
38
39.canvas_box #canvas_text .s_value em {
40  font-size: 14px;
41  font-style: normal;
42}
43
44.canvas_box #canvas_text .s_value i {
45  width: 42px;
46  height: 22px;
47  font-size: 12px;
48  font-style: normal;
49  position: absolute;
50  top: -15px;
51  left: 45%;
52  margin-left: 35px;
53  line-height: 18px;
54  text-align: center;
55  -webkit-background-size: 100% 100%;
56  -moz-background-size: 100% 100%;
57  -o-background-size: 100% 100%;
58  background-size: 100% 100%;
59  color: #7ac6f5;
60}
Copy

1window.requestAnimationFrame =
2  window.requestAnimationFrame ||
3  window.mozRequestAnimationFrame ||
4  window.webkitRequestAnimationFrame ||
5  window.msRequestAnimationFrame
6
7function draw(degrees) {
8  var canvas = document.getElementById('canvas')
9  var ctx = canvas.getContext('2d')
10  var dpi = getPixelRatio(ctx)
11  canvas.width = 210 * dpi
12  canvas.height = 210 * dpi
13
14  ctx.beginPath()
15  ctx.clearRect(0, 0, 210 * dpi, 210 * dpi)
16  ctx.arc(105 * dpi, 105 * dpi, 90 * dpi, Math.PI * 0.75, Math.PI * 0.25, false)
17  ctx.lineWidth = 8 * dpi
18  ctx.lineCap = 'round'
19  ctx.strokeStyle = 'rgb(236,236,236)'
20  ctx.stroke()
21
22  if (degrees != 0.75) {
23    ctx.beginPath()
24    ctx.arc(
25      105 * dpi,
26      105 * dpi,
27      90 * dpi,
28      Math.PI * 0.75,
29      Math.PI * degrees,
30      false
31    )
32    ctx.lineWidth = 12 * dpi
33    ctx.lineCap = 'round'
34    ctx.strokeStyle = 'rgb(255,89,113)'
35    ctx.stroke()
36  }
37
38  // ctx.beginPath();
39  // ctx.font = "14px serif";
40  // ctx.fillText("预期年化利率", 105, 65);
41  // ctx.fillStyle = "#6b6d7c";
42  // ctx.textAlign = "center";
43}
44;(function ($) {
45  $(function () {
46    var canvas = $('#canvas')
47    var val = canvas.attr('data-val')
48    var _val = 0
49    var degrees = 0
50
51    var t = setInterval(function () {
52      degrees = 0.75 + (1.5 * _val) / 100
53      draw(degrees)
54      if (_val == val) {
55        clearInterval(t)
56      } else {
57        _val++
58        if (_val > val) {
59          clearInterval(t)
60        }
61      }
62    }, 10)
63  })
64})(jQuery)
65
66function getPixelRatio(context) {
67  var backingStore =
68    context.backingStorePixelRatio ||
69    context.webkitBackingStorePixelRatio ||
70    context.mozBackingStorePixelRatio ||
71    context.msBackingStorePixelRatio ||
72    context.oBackingStorePixelRatio ||
73    context.backingStorePixelRatio ||
74    1
75
76  return (window.devicePixelRatio || 1) / backingStore
77}
Copy