0.0.2 • Published 8 years ago
nayuki-canvas v0.0.2
Nayuki Canvas
Nayuki Canvas a floating node HTML5 canvas with zero dependencies and lovably simple setup.
Install
$ npm install nayuki-canvas --save
Setup (as global)
<script src="./path/to/node_modules/nayuki-canvas/dist/nayuki-canvas.min.js">
Also consumable as Javascript Module and AMD
Usage
var canvas = document.getElementById('canvas');
var config = {};
var myCanvas = nayukiCanvas(canvas, config).start();
API
Configuration Options
Name | Type | Default | Description |
---|---|---|---|
extraEdges | Number | 20 | Recommendation on how many edges should appear |
nodeCount | Number | 70 | Amount of nodes to render |
network | String | 'balanced' | Other network styles: mesh & wheel |
repulsion | Number | 1 | Speed at which nodes move from one another |
borderFade | Number | -0.02 | Place where nodes fade on canvas edge |
fadeInRate | Number | 0.06 | Rate of nodes fade on create |
fadeOutRate | Number | 0.03 | Rate of nodes fade on destroy |
frameInterval | Number | 20 | Speed of canvas |
background | Array/String | '#0275d8', '#055396' | String and array HEX values |
gradient | String | 'radial' | Gradient styles: linear , radial |
nodeColor | String | '#f1f1f1' | HEX value of node color |
edgeColor | String | '#b4b4b4' | HEX value of edge color |
edgeSize | Number | 0.7 | Thickness of edge |
nodeSize | Number | 900 | Size of node |
Starting & Stopping
myCanvasInstance.start(); // Start Canvas
myCanvasInstance.stop(); // Freeze Frame™
Updating
myCanvasInstance.nodeSize = 450;
// On next frame render nodes will have new size
Removing
myCanvasInstance.destroy();
Checking Browser Support
if (nayukiCanvas.isSupported) {
// canvas time
}
Manual Frame Rendering
myCanvasInstance.start().stop(); // queue and cancel frame render
myCanvasInstance.next(); // manually draw next frame
Created by
Matt Jensen | Nayuki |
Version
- Version 0.0.1