1
<canvas id="canvas"></canvas>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 $(function() {
     var canvas = document.getElementById('canvas');
     var PI = Math.PI;
     var total = 100;
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
     var ctx = canvas.getContext('2d');
     ctx.lineWidth = 3;
     ctx.strokeStyle = 'rgba(242,242,242,.8)';
     //紫色圆以及文本
     function draw(index) {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         //底色圆
         ctx.beginPath();
         ctx.arc(canvas.width / 2, canvas.height / 2, 100, 0, 2 * PI);
         ctx.stroke();
         ctx.save();
         var zhanbi = index / 100 * 2 * PI;
         ctx.translate(canvas.width / 2, canvas.height / 2);
         ctx.beginPath();
         ctx.rotate(-90 * Math.PI / 180);
         ctx.strokeStyle = 'rgba(26,188,156,.8)';
         ctx.arc(0, 0, 100, 0, zhanbi);
         ctx.stroke();
         ctx.rotate(90 * Math.PI / 180);
         ctx.beginPath();
         ctx.font = 'normal 40px Arial';
         ctx.textAlign = 'center';
         ctx.fillStyle = "rgba(58,73,94,.8)";
         ctx.fillText(index, 0, 20);
         ctx.restore();
     }
     var index = 100;
     draw(index);
     setInterval(function() {
         if (index > 0) {
             index--;
             draw(index)
         }
     }, 1000)
 })
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX