KonvaJS中的钻石渐变

Question

我需要使用KonvaJS填充钻石渐变来制作戒指。戒指应如下图所示：

我使用了fillRadialGradientStartPoint: 0, fillRadialGradientStartRadius: 35, fillRadialGradientEndPoint: 0, fillRadialGradientEndRadius: 42, fillRadialGradientColorStops: [0,'#ee3c27',0.15, '#fffc00',0.3,'#00ff00',0.5,'#00fff6',0.65,'#0000ff',0.8,'#ff00f6',1,'#FF0000'] 的实例，其中包含以下属性：

 var width = window.innerWidth;
    var height = window.innerHeight;

    var stage = new Konva.Stage({
      container: 'container',
      width: width,
      height: height
    });

    var layer = new Konva.Layer();

    var arc = new Konva.Arc({
      x: stage.getWidth() / 2,
      y: stage.getHeight() / 2,
      innerRadius: 35,
      outerRadius: 42,
      angle: 360,
     // fill: 'yellow',
      stroke: 'black',
      strokeWidth: 1,
      fillRadialGradientStartPoint: 0,
      fillRadialGradientStartRadius: 35,
      fillRadialGradientEndPoint: 0,
      fillRadialGradientEndRadius: 42,
      fillRadialGradientColorStops: [0,'#ee3c27',0.15, '#fffc00',0.3,'#00ff00',0.5,'#00fff6',0.65,'#0000ff',0.8,'#ff00f6',1,'#FF0000']
/*[0,'#FF0000',0.15, '#FFFF00',0.3,'#00FF00',0.5,'#00FFFF',0.65,'#0000FF',0.8,'#FF00FF',1,'#FF0000']
color-stop(0%, rgba(255, 0, 0, 1)), 
       // color-stop(15%, rgba(255, 255, 0, 1)),
        color-stop(30%, rgba(0, 255, 0, 1)),
        color-stop(50%, rgba(0, 255, 255, 1)),
        color-stop(65%, rgba(0, 0, 255, 1)),
        color-stop(80%, rgba(255, 0, 255, 1)),
        color-stop(100%, rgba(255, 0, 0, 1)));
*/
 
    });

    // add the shape to the layer
    layer.add(arc);

    // add the layer to the stage
    stage.add(layer);

但我无法达到相同的外观和感觉。请注意，这是完整的代码：

＆＃13;

＆＃13;

    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #F0F0F0;
    }

＆＃13;

<script src="https://cdn.rawgit.com/konvajs/konva/0.10.0/konva.min.js"></script>
<div id="container"></div>

＆＃13;

$users = Cache::rememberForever('users', function()
{
    return DB::table('users')->get();
});

＆＃13;

＆＃13;

＆＃13;