3

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

在此处输入图像描述

我使用了一个Konva.Arc具有以下属性的实例：

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);
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #F0F0F0;
    }
<script src="https://cdn.rawgit.com/konvajs/konva/0.10.0/konva.min.js"></script>
<div id="container"></div>

4

0 回答 0