画线从甜甜圈图表中每个扇区的中心开始？

Question

我需要你的帮助，我有以下使用画布绘制的圆环图

这是我用来绘制它的代码     

    <canvas id="chart" width="500" height="500" style="background-color:black">  </canvas>

    <script type="text/javascript">

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

        function drawdountChart(canvas)
        {

            this.x , this.y , this.radius , this.lineWidth , this.strockStyle , this.from , this.to = null;
            this.set = function( x, y, radius, from, to, lineWidth, strockStyle)
            {
                this.x = x;
                this.y = y;
                this.radius = radius;
                this.from=from;
                this.to= to;
                this.lineWidth = lineWidth;
                this.strockStyle = strockStyle; 
            }

            this.draw = function(data)
            {
                canvas.beginPath();
                canvas.lineWidth = this.lineWidth;
                canvas.strokeStyle = this.strockStyle;
                canvas.arc(this.x , this.y , this.radius , this.from , this.to);
                canvas.stroke();
                var numberOfParts = data.numberOfParts;
                var parts = data.parts.pt;
                var colors = data.colors.cs;
                var artPercentage = null;
                var beginFrom = 0;
               for(var i = 0; i<numberOfParts; i++)
               {
                percentage= parts[i]/this.radius;
                canvas.beginPath();
                canvas.lineWidth=30;
                canvas.strokeStyle = colors[i];
                canvas.arc(this.x , this.y ,this.radius , beginFrom , (Math.PI*2*percentage)+beginFrom); 
                beginFrom = (Math.PI*2*percentage)+beginFrom;
                canvas.stroke();
               }
            }
        }
        var data = 
            {
                numberOfParts: 4,
                parts:{"pt": [10, 25, 40, 25]},
                colors:{"cs": ["red", "green", "blue", "yellow" ]}, 
                comments:{coms:["comment1", "comment2", "comment3", "comment4" ]}
            };

        var drawDount = new drawdountChart(chart);
        drawDount.set(150, 150, 100, 0, Math.PI*2, 30, "#FFF");
        drawDount.draw(data);



    </script>


</body>

您可以注意到起始位置是（150X150），半径是100

我需要绘制一条从每个扇区的中心开始的线，但我不知道该怎么做以及使用什么是正确的数学方程式？

Answer 1

演示：http://jsfiddle.net/m1erickson/Phfx4/

你可以像这样计算从radianAngle1到radianAngle2的弧的中心点：

var midAngle = (radianAngle2 - radianAngle1)/2;

var x = centerX + radius * Math.cos( midAngle );

var y = centerY + radius * Math.sin( midAngle );

这就是如何从每个弧的中心到中点绘制线条：

var PI2=Math.PI*2;
accumPt=0;
for(var i=0;i<data.parts.pt.length;i++){
    var pt=data.parts.pt[i];
    var midPt=accumPt+pt/2;
    var midAngle=PI2*midPt/100;
    console.log(i,pt,midPt);
    accumPt+=pt;
    var x=150+100*Math.cos(midAngle);
    var y=150+100*Math.sin(midAngle);
    chart.save();
    chart.beginPath();
    chart.moveTo(150,150);
    chart.lineTo(x,y);
    chart.lineWidth=3;
    chart.strokeStyle="black";
    chart.stroke();
    chart.restore();
}

此处的示例代码和演示

＆＃13;

＆＃13;

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

function drawdountChart(canvas) {

    this.x, this.y, this.radius, this.lineWidth, this.strockStyle, this.from, this.to = null;
    this.set = function (x, y, radius, from, to, lineWidth, strockStyle) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.from = from;
        this.to = to;
        this.lineWidth = lineWidth;
        this.strockStyle = strockStyle;
    }

    this.draw = function (data) {
        canvas.beginPath();
        canvas.lineWidth = this.lineWidth;
        canvas.strokeStyle = this.strockStyle;
        canvas.arc(this.x, this.y, this.radius, this.from, this.to);
        canvas.stroke();
        var numberOfParts = data.numberOfParts;
        var parts = data.parts.pt;
        var colors = data.colors.cs;
        var artPercentage = null;
        var beginFrom = 0;
        for (var i = 0; i < numberOfParts; i++) {
            percentage = parts[i] / this.radius;
            canvas.beginPath();
            canvas.lineWidth = 30;
            canvas.strokeStyle = colors[i];
            canvas.arc(this.x, this.y, this.radius, beginFrom, (Math.PI * 2 * percentage) + beginFrom);
            beginFrom = (Math.PI * 2 * percentage) + beginFrom;
            canvas.stroke();
        }
    }
}
var data = {
    numberOfParts: 4,
    parts: {
        "pt": [10, 25, 40, 25]
    },
    colors: {
        "cs": ["red", "green", "blue", "yellow"]
    },
    comments: {
        coms: ["comment1", "comment2", "comment3", "comment4"]
    }
};

var drawDount = new drawdountChart(chart);
drawDount.set(150, 150, 100, 0, Math.PI * 2, 30, "#FFF");
drawDount.draw(data);


var PI2 = Math.PI * 2;
accumPt = 0;
for (var i = 0; i < data.parts.pt.length; i++) {
    var pt = data.parts.pt[i];
    var midPt = accumPt + pt / 2;
    var midAngle = PI2 * midPt / 100;
    console.log(i, pt, midPt);
    accumPt += pt;
    var x = 150 + 100 * Math.cos(midAngle);
    var y = 150 + 100 * Math.sin(midAngle);
    chart.save();
    chart.beginPath();
    chart.moveTo(150, 150);
    chart.lineTo(x, y);
    chart.lineWidth = 3;
    chart.strokeStyle = "black";
    chart.stroke();
    chart.restore();
}

＆＃13;

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

＆＃13;

<h4>Lines from center to arc midpoints.</h4>
<canvas id="canvas" width=300 height=300></canvas>

＆＃13;

＆＃13;

＆＃13;