Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zxdong262/canvas-shapes-bg
Draw simple shape moving animation in canvas as webpage background
https://github.com/zxdong262/canvas-shapes-bg
animation background canvas
Last synced: 25 days ago
JSON representation
Draw simple shape moving animation in canvas as webpage background
- Host: GitHub
- URL: https://github.com/zxdong262/canvas-shapes-bg
- Owner: zxdong262
- License: mit
- Created: 2023-08-05T07:31:06.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-07T04:14:05.000Z (over 1 year ago)
- Last Synced: 2024-10-12T00:40:53.058Z (about 1 month ago)
- Topics: animation, background, canvas
- Language: TypeScript
- Homepage: https://html5beta.com/apps/canvas-shapes-bg/
- Size: 110 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# canvas-shapes-bg
Draw simple shapes moving animations in canvas as webpage background
## Demo
https://html5beta.com/apps/canvas-shapes-bg/
## Load
### as esm module
```bash
npm i -D canvas-shapes-bg
```
```js
import CanvasShapesBg from 'canvas-shapes-bg'
```
### load from cdn
```html
```
```js
const { CanvasShapesBg } = window
```
### Use
```html
<body>
<canvas id="ca" style="position: absolute;z-index:-1"></canvas>
<div id="content" style="position: relative;z-index:1"></div>
<body>
```
```js
import CanvasShapesBg from 'canvas-shapes-bg'
// or if load from cdn,
const { CanvasShapesBg } = window
function run() {
const options = {
shapeCount: 20, //how many shapes to draw, optional
timer: 100, //render animation frame for every {timer} ms, optional
step: 3, //animation step px, optional
minSize: 50, //shape size min, optional
maxSize: 150, //shape size max, optional
shapesPool: ['star'], // what shape you want draw, inside there are 'star', 'bubble', 'heart', 'light', 'balloon', optional, default is ['star']
}
const shapesInst = new CanvasShapesBg(
document.getElementById('ca'),
options
)
//start animation
shapesInst.start()
//stop
shapesInst.stop()
//visit src/canvas-shapes-bg.js for more instance method
//you can extend shape draw method
Shapes.prototype.buildShapeMoon = function(){
//...
}
Shapes.prototype.drawMoon = function(){
//...
}
shapesInst.shapesPool = ['moon']
//optional methods
shapesInst.buildPosArrayFromText(text, options)
shapesInst.moveTo(targetArr, options)
}
```
## LICENCE
MIT