New to Kendo UI for jQueryStart a free 30-day trial

kendo.drawing.RadialGradient : kendo.drawing.Gradient

Represents a radial color gradient.

Example - creating a radial gradient

<div id="surface" />
<script>
  var draw = kendo.drawing;
  var geom = kendo.geometry;

  var gradient = new draw.RadialGradient({
    // Center and radius are relative to shape size
    center: [ 0.75, 0.5 ],
    radius: 0.5,
    stops: [{
      offset: 0,
      color: "#f00",
      opacity: 0
    }, {
      offset: 1,
      color: "#f00",
      opacity: 0.8
    }]
  });

  var rect = new geom.Rect([
    // Origin X, Y
    0, 0
  ], [
    // Width, height
    100, 50
  ]);

  var path = draw.Path.fromRect(rect, {
    stroke: null,
    fill: gradient
  });

  var surface = draw.Surface.create($("#surface"));
  surface.draw(path);
</script>

Fields

Constructor Parameters

Configuration

Methods