Javascript FabricJs-饼图块的径向梯度

正如你在这里看到的：我有64个饼图，我想从中间到边缘有一个径向梯度。（现场每件作品都会有不同的颜色）但我没有成功地创造出那种效果

代码如下：

var canvas = window._canvas = new fabric.Canvas('c');

var x=300
, y=300
, totalGates=64
, start=0
, radius=200
, val = 360 / totalGates;

for (var i = 0; i < totalGates; i++) {
  createPath(x, y, radius, val*i, (val*i)+val);
}

function createPath (x, y, radius, startAngle, endAngle) {
    var flag = (endAngle - startAngle) > 180;
        startAngle = (startAngle % 360) * Math.PI / 180;
        endAngle = (endAngle % 360) * Math.PI / 180;

        var path = 'M '+x+' '+y+' l ' + radius * Math.cos(startAngle) + ' ' + radius * Math.sin(startAngle) + 
            ' A ' + radius + ' ' + radius + ' 0 ' + (+flag) + ' 1 ' + (x + radius * Math.cos(endAngle))+ ' ' + (y + radius * Math.sin(endAngle)) + ' z';
    var piePiece = new fabric.Path(path);
        piePiece.set({
         strokeWidth:0
     });

    piePiece.setGradient('fill', {
        type:'radial',
        x1: x,
        y1: y,
        //x2: x + radius * Math.cos(endAngle),
        //y2: y + radius * Math.sin(endAngle),
        r1: radius, 
        r2: 0,
        colorStops: {           
            0: '#000',
            1: '#fff',
        }
    });
    canvas.add(piePiece);
}

以下是预期结果：

这是密码

var canvas = window._canvas = new fabric.Canvas('c');

var x=300
, y=300
, totalGates=64
, start=0
, radius=200
, val = 360 / totalGates;

            /* Loops through each gate and prints selected options */
for (var i = 0; i < totalGates; i++) {
  createPath(x, y, radius, val*i, (val*i)+val, i);
}

function createPath (x, y, radius, startAngle, endAngle,i ) {
var flag = (endAngle - startAngle) > 180;
        startAngle = (startAngle % 360) * Math.PI / 180;
        endAngle = (endAngle % 360) * Math.PI / 180;

        var path = 'M '+x+' '+y+' l ' + radius * Math.cos(startAngle) + ' ' + radius * Math.sin(startAngle) + 
            ' A ' + radius + ' ' + radius + ' 0 ' + (+flag) + ' 1 ' + (x + radius * Math.cos(endAngle))+ ' ' + (y + radius * Math.sin(endAngle)) + ' z';
        var piePiece = new fabric.Path(path);
    piePiece.set({
    strokeWidth:0
    });

        piePiece.setGradient('fill', {
            type:'radial',
            x1: x > Math.round(piePiece.left) ? x - piePiece.left : 0,
            y1: y > Math.round(piePiece.top) ? y - piePiece.top : 0,
            x2: x > Math.round(piePiece.left) ? x - piePiece.left : 0,
            y2: y > Math.round(piePiece.top) ? y - piePiece.top : 0,
            r1: radius, 
            r2: 0,
            colorStops: {           
                0: '#000',
                1: '#f0f',
            }
        });
    canvas.add(piePiece);
}

var canvas=window.\u canvas=newfabric.canvas（'c'）；
变量x=300
，y=300
，totalGates=64
，开始=0
，半径=200
，val=360/总门；
/*循环通过每个浇口并打印选定的选项*/
对于（变量i=0；i180；
startAngle=（startAngle%360）*Math.PI/180；
端角=（端角%360）*Math.PI/180；
变量路径='M'+x++'+y++'l'+radius*Math.cos（startAngle）+'+radius*Math.sin（startAngle）+
'A'+半径+''+半径+'0'+（+标志）+'1'+（x+半径*数学.cos（endAngle））+''+（y+半径*数学.sin（endAngle））+'z'；
var piepaike=新的fabric.Path（路径）；
拼图({
冲程宽度：0
});
Piepeate.setGradient（'填充'{
类型：'径向'，
x1:x>数学圆（拼图左）？x-拼图左：0，
y1:y>数学圆（Piepeat.top）？y-Piepeat.top:0，
x2:x>数学圆（拼图左）？x-拼图左：0，
y2:y>数学圆（Piepeat.top）？y-Piepeat.top:0，
r1：半径，
r2:0，
彩色停止：{
0: '#000',
1:“#f0f”，
}
});
画布。添加（拼图）；
}

以下是缺失的代码：

   piePiece.setGradient('fill', {
        type:'radial',
        x1: x > Math.round(piePiece.left) ? x - piePiece.left : 0,
        y1: y > Math.round(piePiece.top) ? y - piePiece.top : 0,
        x2: x > Math.round(piePiece.left) ? x - piePiece.left : 0,
        y2: y > Math.round(piePiece.top) ? y - piePiece.top : 0,
        r1: radius, 
        r2: 0,
        colorStops: {           
            0: '#000',
            1: '#f0f',
        }
    });

---

你有你想要的图片吗？你说的边缘中间的梯度是什么意思？像这样：（我刚解出来！）

   piePiece.setGradient('fill', {
        type:'radial',
        x1: x > Math.round(piePiece.left) ? x - piePiece.left : 0,
        y1: y > Math.round(piePiece.top) ? y - piePiece.top : 0,
        x2: x > Math.round(piePiece.left) ? x - piePiece.left : 0,
        y2: y > Math.round(piePiece.top) ? y - piePiece.top : 0,
        r1: radius, 
        r2: 0,
        colorStops: {           
            0: '#000',
            1: '#f0f',
        }
    });