javascript-将边界添加到派中的切片的外部区域

http://jsfiddle.net/wm7pwL2w/8/

如何在饼图的切片外部添加边框？请检查我的jsfiddle.我已经在这里实现了极地面积图.我需要每个边框都可以指定不同的颜色.例如参考这张图片

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

var center = {
x: 200,
y: 150
};
var myColor = ["#ccc", "#ccc", "#ccc", "#ccc", "#c01c3f"];
var myData = [20, 40, 50, 70, 100];
var myRadius = [150, 120, 80, 100, 70];
var myDistance = [5, 5, 2, 2, 2];
var myText = ['first', 'second', 'third', 'fourth', 'fifth'];

function getTotal(data) {
var myTotal = 0;
for (var j = 0; j < data.length; j++) {
    myTotal += (typeof data[j] == 'number') ? data[j] : 0;
}
return myTotal;
}

function plotData() {
var lastend = 0;
var myTotal = getTotal(myData);

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
//ctx.strokeStyle = 'rgba(255,255,255,0.5)';
ctx.lineWidth = 1;
ctx.font="15px Arial";
for (var i = 0; i < myData.length; i++) {
    ctx.save();
    ctx.fillStyle = myColor[i];
    ctx.beginPath();
    ctx.translate(center.x, center.y);
    var thisAngle = (Math.PI * 2 * (myData[i] / myTotal));
    ctx.rotate(lastend + thisAngle / 2);
    ctx.translate(myDistance[i], 0);
    ctx.moveTo(0, 0);
    ctx.arc(0, 0, myRadius[i], -(thisAngle / 2), thisAngle / 2, false);
    ctx.closePath();
    ctx.fill();
   // ctx.stroke();
    ctx.fillStyle = '#fff';
    ctx.translate(0.6 * myRadius[i], 0);
    ctx.rotate(-(lastend + thisAngle / 2));
    ctx.fillText(myText[i], 0, 0);
    ctx.restore();
    lastend += thisAngle;
}
}

plotData();

感谢您的所有帮助.

解决方法:

您需要分两个步骤进行操作,首先填充形状,然后仅绘制圆弧.为此,您需要在填充完外部边框后使用beginPath()作为外部边框,以免划出完整的形状.

...
ctx.closePath();
ctx.fill();
// original code stops

// insert this code
ctx.beginPath();
ctx.strokeStyle = '#079';
ctx.lineWidth = 9;
ctx.arc(0, 0, myRadius[i], -(thisAngle / 2), thisAngle / 2);
ctx.stroke();

// original code continues...
// ctx.stroke();
ctx.fillStyle = '#fff';
...

Updated fiddle

标签：html5,html5-canvas,javascript
来源： https://codeday.me/bug/20191121/2049693.html