SOURCE

var width= 300,height= 300;
// var stage = new Konva.Stage({
//       container: 'box',
//       width: width,
//       height: height
//     });
// var layer = new Konva.Layer();
// var circle = new Konva.Circle({
//       x: stage.getWidth() / 2,
//       y: stage.getHeight() / 2,
//       radius: 70,
//       fill: 'transparent',
//       stroke: 'blue',
//       strokeWidth: 2
//     });
// var arc = new Konva.Arc({
//       x: stage.getWidth() / 2,
//       y: stage.getHeight() / 2,
//       innerRadius: 68,
//       outerRadius: 72,
//       angle: 160,
//       fill: 'yellow',
//       stroke: 'red',
//       strokeWidth: 4
//     });
// layer.add(arc);
// layer.add(circle);
// stage.add(layer);

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

var layer = new Konva.Layer();
    var rect = new Konva.Rect({
      x: 50,
      y: 50,
      width: 200,
      height: 50,
      //fill: 'green',
      //stroke: 'black',
      strokeWidth: 4,
      fillLinearGradientStartPoint: { x : 25, y : 0},//起点
      fillLinearGradientEndPoint: { x : 200, y : 25},//终点
      fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
    });

layer.add(rect);
stage.add(layer);

<script src="https://cdn.rawgit.com/konvajs/konva/1.3.0/konva.js"></script>
<div id="box"></div>
<div class="transition"></div>

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