如何用圆弧绘制圆圈

Question

我在矩形使用的画布中绘制了200个或更多（高流动性）对象。

像这样 - ＆gt; http://jsfiddle.net/m1erickson/o5xp21t2/

    ctx.beginPath();
        ctx.moveTo(s.x1,s.y1);
        ctx.lineTo(s.x2,s.y2); 
        ctx.lineTo(s.x3,s.y3); 
        ctx.lineTo(s.x4,s.y4); 
        ctx.lineTo(s.x1,s.y1);
        if(draw){
            ctx.fill();
            ctx.stroke();
            ctx.fillStyle="blue";
            ctx.fillText(k,(s.x2+s.x3)/2,(s.y2+s.y3)/2);    
        }

...

但是，我想画圆弧

像这样 - ＆gt;

如何更改来源......

这是我的位置数据......

全长：156356

开始结束长度（结束开始）

488 1546 1058
2082 3590 1508
5246 6369 1123
8591 8773 182
9185 9292 107
11367 12887 1520
12943 14224 1281
14604 14846 242
15960 16700 740
16945 17652 707
17868 22028 4160
22194 25021 2827
25030 28242 3212
30002 30088 86
30966 31064 98
34894 35952 1058
35903 37324 1421
37970 38155 185
38921 39220 299
39347 41548 2201
41577 43826 2249
44541 46511 1970年 47664 48266 602
50877 51350 473
51456 52133 677
52185 52544 359
54692 55090 398
55090 56583 1493
57343 58791 1448
59447 60955 1508
61653 61760 107
62176 62727 551
63056 63742 686
63948 64907 959
65920 66039 119
66175 66288 113
66314 66430 116
66443 66691 248
67865 67957 92
68113 68223 110
69020 69148 128
69597 69794 197
69964 70266 302
70515 70898 383
71680 99829 28149
71955 73948 1993
74382 75899 1517
76112 76219 107
76311 76439 128
76524 76760 236
76895 78323 1428
78501 79734 1233
79907 80911 1004
80989 81402 413
81515 81625 110
81744 81974 230
82098 82499 401
82694 83059 365
83198 84548 1350
84707 85360 653
85348 85827 479
85904 86179 275
86236 87717 1481
87739 88017 278
88350 94631 6281
96010 98217 2207
98518 98982 464
110555 112240 1685
112161 114377 2216
115597 115761 164
116742 117701 959
117928 119427 1499
119549 119791 242
120043 120345 302
120567 121094 527
121480 121977 497
122063 124180 2117
124185 125363 1178
125459 125728 269
126126 131822 5696
143395 143859 464
144160 146367 2207
147746 154027 6281
154360 154638 278
154660 156141 1481

Answer 1

围绕中心点划一系列弧线。

获取与数据值对应的可变长度弧：

• 计算数据值的总和

• 整圆是PI * 2，因此每个圆弧的角度为：（PI * 2）* thisValue / totalValues

＆＃13;

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var values=[];
var totalValues=0;

for(var i=0;i<15;i++){
  d=parseInt(Math.random()*20-10);
  values.push(d);
  totalValues+=Math.abs(d);
}

var PI2=Math.PI*2;
var cx=125;
var cy=125;
var radius=100;
var gap=PI2/160;
var accumAngle=0;

ctx.lineWidth=2;
ctx.strokeStyle='black';
ctx.beginPath();
ctx.arc(cx,cy,radius,0,PI2);
ctx.closePath();
ctx.stroke();

ctx.lineWidth=12;
for(var i=0;i<values.length;i++){
  var v=values[i];
  var r=(v<0)?-6:6;
  var a=(PI2-gap*values.length)*Math.abs(v)/totalValues;

  ctx.beginPath();
  ctx.arc(cx,cy,radius+r,accumAngle,accumAngle+a);
  ctx.strokeStyle=randomColor();
  ctx.stroke();

  accumAngle+=gap+a;

  ctx.fillStyle=ctx.strokeStyle;
  ctx.fillRect(270,i*23+5,10,15);
  ctx.fillStyle='black';
  ctx.fillText('Value#'+i+'= '+v,285,i*23+15);
}

function randomColor(){ 
  return('#'+Math.floor(Math.random()*16777215).toString(16));
}

＆＃13;

body{ background-color: ivory; padding:10px; }
canvas{border:1px solid red;}

＆＃13;

<h4>Arc lengths correspond to data values<br>Negative values are inside the circle<br>Positive values are outside the circle</h4>
<canvas id="canvas" width=350 height=360></canvas>

＆＃13;

＆＃13;

＆＃13; ] 1