Click for more examples
Starback.js
Getting Started
You can use starback.js directly with <script> tag or import syntax.
-
With
<script>tag# Using CDN <script src="https://unpkg.com/[email protected]/dist/starback.global.js"></script> # Using downloaded files <script src="PATH_TO_YOUR_DIST_FOLDER/starback.js"></script>
-
With import
Install via NPM first:
npm install starback
and then
import Starback from 'starback'
Example Usage
<canvas id="canvas"></canvas>
<script src="PATH_TO_DIST_FOLDER/starback.js"></script>
<script>
const canvas = document.getElementById('canvas')
const starback = new Starback(canvas, {
type: 'dot',
quantity: 100,
direction: 225,
backgroundColor: ['#0e1118', '#232b3e'],
randomOpacity: true,
})
</script>You can check the more options in Options section
Options
| Key | Type | Description | Required | Default Value |
|---|---|---|---|---|
| type | String | Required. Star type to use. The values are 'dot' or 'line' | true | |
| width | Number | Canvas width to set | no | 800 |
| height | Number | Canvas height to set | no | 600 |
| backgroundColor | String|Array | Color of the background, use string for solid color, or array of colors for linear gradient | no | #ccc |
| quantity | Number | Number of stars to show | no | 100 |
| showFps | Boolean | Show FPS on the top left screen | no | false |
| speed | Number | Star speed | no | 0.5 |
| starSize | Number|Array | Use number for fixed star size. Use [minSize, maxSize] value for random the size within the range | no | [0, 3] for type: dot, 100 for type: line |
Additional options for type: 'dot'
| Key | Type | Description | Required | Default Value |
|---|---|---|---|---|
| direction | Number | Use 360 degree to set the direction | no | 225 |
| randomOpacity | Boolean|Array | If true, random star will get random opacity. Use array [minOpacity, maxOpacity] to limit the random opacity |
no | false |
| starColor | String | Color of the stars, you can use rgb or hex like css color. |
no | white |
Additional options for type: 'line'
| Key | Type | Description | Required | Default Value |
|---|---|---|---|---|
| directionY | Number | The direction the star to move vertically (1 = to bottom, 0 = to top) | no | 1 |
| directionX | Number | The direction the star to move vertically (1 = to right, 0 = to left) | no | 1 |
| distanceX | Number | Distance horizontally the star should reaching at | no | 0.1 |
| frequency | Number | The frequency of star will be rotated | no | 10 |
| slope | Object | The quadraticCurve coordinate that will be applied to stars. Read MDN | no | {x: 1, y: 1} |
| starColor | String|Array | Color of the stars, use string for solid color, or array of colors for linear gradient | no | ['#fb00ff', '#00dde0'] |
| spread | Number | The spread level of the stars | no | 1 |
Methods
| Name | Parameter | Description |
|---|---|---|
generateStar(amount) |
amount: number | The quantity of stars that will be shown |
addToFront(callback(ctx)) |
function(ctx: CanvasRenderingContext2D) | Add to front of the falling star by given context |
addToBehind(callback(ctx)) |
function(ctx: CanvasRenderingContext2D) | Add to back of the falling star by given context |
Example method usage: adding image to front
let starback = new Starback(canvas, options)
let mountainImage = new Image()
mountainImage.src = 'images/mountain.png'
mountainImage.onload = () => {
starback.addToFront((ctx) => {
ctx.drawImage(
mountain,
0,
0,
mountain.width,
mountain.height,
0,
canvas.height - mountain.height,
canvas.width,
mountain.height
)
})
}Contributing
You can contribute to this repository. See CONTRIBUTING.md
Donate
If you have used this library and it's useful for you, please consider to donate:
License
This library is under MIT license.