Lines.js

Dynamic diagonal background lines


Download

Get Lines

  • Install through bower: bower install lines
  • Or, you can simply download from GitHub.

Usage

It's highly recommended to take a look at included demo page.

  • Install and include lines.js inside your html.
  • Add a canvas element to the page (with 'lines-canvas' id for default options).
  • Use with default options:
    new lines().draw();
  • Use with customizations:
    new lines({canvas: 'canvas-id',
         pieces: 3, color: '#D34567'}).draw();
    canvas: Canvas HTML id.
    pieces: Number of lines to be drawn.
    color: Hex code of the lines' color.
  • For further go to the API.

API

lines()

Constructor of the library. Can be called naked for default options. Or it can be called with pre-defined options.
Example Calls:
var ln = new lines();
var ln = new lines({canvas: 'canvas-id',
      pieces: 3, color: '#D34567'});

lines.setCanvas(canvas)

Sets canvas HTML id which will contain lines.
@param canvas: canvas HTML id.

lines.setPieces(pieces)

Sets number of lines to be drawn.
@param pieces: number of lines to be drawn.

lines.setColor(color)

Sets the hex color of the lines.
@param color: hex code of the desired color.

lines.clearCanvas()

Clears the canvas to avoid multiple drawings.

lines.setDefaults()

Sets the default options.

lines.draw()

draw() is the key method, clears the canvas and draws the lines according to the options.