画布五角大楼，中心渐变的路径

Question

使用渐变进行多边形填充的最佳方法是什么？

这是我的试用，但并不完美。 应该有一个更好的方法，在角度没有空白区域 codepen trial

window.onload = function() {
var ce = document.getElementById('ce');
var c = ce.getContext('2d');
// linear gradient fill (second from left)
var gradient = c.createLinearGradient(0, 0, 0, -180);
gradient.addColorStop(0.00, 'white');
gradient.addColorStop(.50, 'black');
gradient.addColorStop(.61, 'black');
gradient.addColorStop(.611, 'white');
gradient.addColorStop(.65, 'black');
gradient.addColorStop(.651, 'white');
gradient.addColorStop(.90, 'white');
gradient.addColorStop(.901, 'rgba(68, 185, 229,.1)');
gradient.addColorStop(.95, 'rgb(12, 80, 180)');
gradient.addColorStop(.96, 'rgb(26, 26, 26)');
gradient.addColorStop(.961, 'white');
gradient.addColorStop(.989, 'white');
gradient.addColorStop(1.00, 'rgb(26, 26, 26)');
c.translate(ce.offsetWidth / 2, ce.offsetHeight / 2);

for (var pie = 0; pie < 5; pie++) {
        c.save();
        c.rotate((pie / 5 * Math.PI * 2) - Math.PI / 5);

        c.beginPath();
        c.moveTo(0, 0);

        c.lineTo(-130, -180);
        c.strokeStyle = "rgba(0, 0, 0, 0)";
        c.stroke();
        c.lineTo(131, -180);
        c.lineTo(0, 0);
        c.closePath();
        c.fillStyle = gradient;
        c.fill();
        c.lineWidth = .5;
        c.lineCap = 'square';
        c.strokeStyle = gradient;
        c.stroke();

        c.restore();
    }
}