Socket
Socket
Sign inDemoInstall

canvas-nest.js

Package Overview
Dependencies
1
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    canvas-nest.js

A nest backgroud of website draw on canvas use javascript, do not depends on jQuery.


Version published
Weekly downloads
115
decreased by-51.88%
Maintainers
1
Install size
189 kB
Created
Weekly downloads
 

Readme

Source

canvas-nest.js

A nest background of website draw on canvas. 中文 Readme 帮助文档.

npm npm npm gzip

screenshot

Feature

  • It does not depend on jQuery and original javascrpit is used.
  • Small size, only 2 Kb.
  • Easy to implement, simple configuration.
  • You do not have to be a web developer to use it.
  • Modularized with area rendering.

Install

# use npm
npm install --save canvas-nest.js

# or use yarn
yarn add canvas-nest.js

Usage

  • Script tag

Insert the code below between <body> and </body>.

<script src="dist/canvas-nest.js"></script>

Strongly suggest to insert before the tag </body>, as the following:

<html>
<head>
	...
</head>
<body>
	...
	...
	<script src="dist/canvas-nest.js"></script>
</body>
</html>

Then ok! Please do not add the code in the <head> </head>.

  • Modular usage (Area render)

After installation, you can import this as module.

There is only one API, use it as below:

import CanvasNest from 'canvas-nest.js';

const config = {
  color: '255,0,0',
  count: 88,
};

// Using config rendering effect at 'element'.
const cn = new CanvasNest(element, config);

// destroy
cn.destroy();

Configuration

  • color: color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  • pointColor: color of points, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  • opacity: the opacity of line (0~1), default: 0.5.
  • count: the number of lines, default: 99.
  • zIndex: z-index property of the background, default: -1.

Example:

  • Script tag
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="dist/canvas-nest.js"></script>
  • Modular usage (Area render)
{
  color: '0,0,255',
  opacity: 0.7,
  zIndex: -2,
  count: 99,
};

Note: If the Configuration isn't customized, default values are available as well.

Used by

  • A Tool: a convenient tool box.

License

MIT@hustcc.

Keywords

FAQs

Last updated on 06 Dec 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc