0

waterpipe.js

waterpipe.js是一个用于烟熏背景生成的jQuery插件（HTML5 Canvas）。(waterpipe.js is a jQuery plugin for smoky backgrounds generation (HTML5 Canvas) )

Official Site
Github repo
Main metrics
  • Owner: dragdropsite/waterpipe.js
  • Platform:
  • License:: MIT License
  • Category::
  • Topic:
  • Like:
    2
      Compare:

Github stars Tracking Chart

Main metrics

Overview
Name With Ownerdragdropsite/waterpipe.js
Primary LanguageJavaScript
Program languageCSS (Language Count: 3)
Platform
License:MIT License
所有者活动
Created At2014-05-11 23:01:41
Pushed At2017-04-18 08:00:57
Last Commit At2017-04-18 11:00:57
Release Count0
用户参与
Stargazers Count419
Watchers Count21
Fork Count166
Commits Count4
Has Issues Enabled
Issues Count4
Issue Open Count3
Pull Requests Count1
Pull Requests Open Count1
Pull Requests Close Count0
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private

waterpipe.js - smoky backgrounds generator (HTML5 Canvas)

waterpipe.js is a jQuery plugin for smoky backgrounds developed by dragdropsite.com

alt tag

Examples

Here are some examples generated using waterpipe.js plugin.

alt tag
alt tag
alt tag
alt tag
alt tag
alt tag
alt tag
alt tag
alt tag
alt tag
alt tag
alt tag

Usage

1. Include jQuery and waterpipe.js

<script src="lib/jquery-1.11.0.min.js"></script>
<script src="waterpipe.js"></script>

2. Create wrapper with canvas element inside

<div id="wavybg-wrapper" style="width: 100%; height: 100%;"> 
    <canvas>Your browser does not support HTML5 canvas.</canvas>
</div>

3. Initialize with

var smokyBG = $('#wavybg-wrapper').waterpipe({
    //Default values
    gradientStart: '#000000',
    gradientEnd: '#222222',
    smokeOpacity: 0.1,
    numCircles: 1,
    maxMaxRad: 'auto',
    minMaxRad: 'auto',
    minRadFactor: 0,
    iterations: 8,
    drawsPerFrame: 10,
    lineWidth: 2,
    speed: 1,
    bgColorInner: "#ffffff",
    bgColorOuter: "#666666"
});

Options, Option, Type, Default, Description, ---------------, ---------------, -----------, --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------, gradientStart, string, '#000000', Gradient start color in hex format., gradientEnd, string, '#222222', Gradient end color in hex format., smokeOpacity, number, 0.1, Smoke opacity 0 to 1., numCircles, int, 1, Number of circles (smokes)., maxMaxRad, int or 'auto', 'auto', Could be used to change circle radius size, minMaxRad, int or 'auto', 'auto', Could be used to change circle radius size, minRadFactor, int, It's a factor representing the size of the smallest radius with respect to the largest possible. Integer from 0 to 1., iterations, int, 8, The number of subdividing steps to take when creating a single fractal curve. Can use more, but anything over 10 (thus 1024 points) is overkill for a moderately sized canvas., drawsPerFrame, int, 10, Number of curves to draw on every tick of the timer, lineWidth, number, 2, Line width, speed, int, 1, Drawing speed (tick of timer in ms), bgColorInner, string, '#ffffff', Background outer color in hex format, bgColorOuter, string, '#666666', Background inner color in hex format, ## Methods

The following code could be used to call a method: smokyBG.data('waterpipe').generate();Please make sure variable smokyBG exists, Method, Arguments, Description, -----------, -------------, -------------------------------------------------------------------------------------------------, generate, Generates background canvas, setOption, optionName,, Set a new value to an option. Please check the above table for possible option names and values, optionValue, download, width: int,, Download size in pixels, height: int, ## Demo

Please check the demo to generate and download your own smoky backgrounds: http://dragdropsite.github.io/waterpipe.js

Credits

rectangleworld.com - big part of code has been taken from the examples provided on this blog

License

Licensed under MIT license