gradient

<script src="./point_src/gradient"></script>

Meta Data
filepath_exists True
path gradient
filepath gradient.js
clean_files ()

  • ClassDeclaration
    class comments:
    A Gradient instance can be generated once or for every draw. Examples: Pre-configure the origin points and the _type_ g = new Gradient(null, 'Linear', [stage.center]) g.addStops({ 0: "hsl(299deg 62% 44%)", 1: "hsl(244deg 71% 56%)" }) let canvasGradient = g.getObject(ctx) ctx.fillStyle = canvasGradient --- The context may be given early. g = new Gradient(ctx, 'Linear',) g.addStops({ 0: "hsl(299deg 62% 44%)", 1: "hsl(244deg 71% 56%)" }) let canvasGradient = g.getObject() ctx.fillStyle = canvasGradient --- Provide the context at the last stage. g = new Gradient() g.addStops({ 0: "hsl(299deg 62% 44%)", 1: "hsl(244deg 71% 56%)" }) g = g.conical(stage.center) // draw ctx.fillStyle = g.getObject(ctx) --- Radial gradient through two point. The same points are used as color stops. pointGradInner = primaryPoint.copy().update({ radius: rel(-250), color:'pink' }) pointGradOuter = primaryPoint.copy().update({ radius: rel(-10), color: 'purple' // dark }) pointGrad = (new Gradient).radial(pointGradInner, pointGradOuter) pointGrad.addStops({ 0: pointGradInner, 1: pointGradOuter }) pointGrad.radial() // refresh hack. let ctxPointGrad = pointGrad.getObject(ctx) primaryPoint.pen.fill(ctx, ctxPointGrad) --- This base `Gradient` class covers the three core types: + createConicGradient(startAngle, x, y) + createLinearGradient(x0, y0, x1, y1) + createRadialGradient(x0, y0, r0, x1, y1, r1) ## More Info Create a new gradient object: let g = new Gradient() Many _stops_ define the gradient color values. A _stop_ is a relative 1D position from `0` to `1`. g.addStops({ 0: "hsl(299deg 62% 44%)", 1: "hsl(244deg 71% 56%)" }) Define the type of gradient object: let rootPoint = stage.center let grad = g.linear(rootPoint) Under the hood, this configures and refreshes `g` gradient instance. similar to: // same as above g = new Gradient(null, 'Linear', [stage.center]) A canvas _gradient_ is generated when required. This Gradient class mimic this: let canvasGradient = g.getObject(ctx) The `getObject` method returns a result from the root functions, such as `createLinearGradient`
    • constructor

      constructor

      (
      ctx , type = Linear , originPoints = []
      )
      from class_name
      dict_keys(['kind', 'word', 'static', 'computed', 'is_symbol', 'value', 'type', 'comments', 'pos'])
      default
    • method

      conic

      (
      point
      )
      from class_name
      dict_keys(['kind', 'word', 'static', 'computed', 'is_symbol', 'value', 'type', 'comments', 'pos'])
      conic({radians, x, y} = point) {
    • method

      linear

      (
      pointA , pointB
      )
      from class_name
      dict_keys(['kind', 'word', 'static', 'computed', 'is_symbol', 'value', 'type', 'comments', 'pos'])
      linear({x0, y0}=pointA, {x1, y1}=pointB)
    • method

      radial

      (
      pointA , pointB
      )
      from class_name
      dict_keys(['kind', 'word', 'static', 'computed', 'is_symbol', 'value', 'type', 'comments', 'pos'])
      radial({x0, y0, r0}=pointA, {x1, y1, r1}=pointB)
    • method

      getObject

      (
      ctx
      )
      from class_name
      dict_keys(['kind', 'word', 'static', 'computed', 'is_symbol', 'value', 'type', 'comments', 'pos'])
      build.
    • method

      installStops

      (
      gradient , stopMap
      )
      from class_name
      dict_keys(['kind', 'word', 'static', 'computed', 'is_symbol', 'value', 'type', 'comments', 'pos'])
      Given a canvas graident object, apply the stops from the _points_ within this instance.
    • method

      generateLinearArgs

      (
      )
      from class_name
      dict_keys(['kind', 'word', 'static', 'computed', 'is_symbol', 'value', 'type', 'comments', 'pos'])
      createLinearGradient(x0, y0, x1, y1)
    • method

      generateConicArgs

      (
      )
      from class_name
      dict_keys(['kind', 'word', 'static', 'computed', 'is_symbol', 'value', 'type', 'comments', 'pos'])
      createConicGradient(startAngle, x, y)
    • method

      generateRadialArgs

      (
      )
      from class_name
      dict_keys(['kind', 'word', 'static', 'computed', 'is_symbol', 'value', 'type', 'comments', 'pos'])
      createRadialGradient(x0, y0, r0, x1, y1, r1)
    • method

      addStops

      (
      dict
      )
      from class_name
      dict_keys(['kind', 'word', 'static', 'computed', 'is_symbol', 'value', 'type', 'comments', 'pos'])
    dict_keys(['kind', 'word', 'parentName', 'type', 'body', 'comments', 'pos'])