0.0.2 • Published 11 months ago
particle-drawer v0.0.2
Particle-Drawer
Draw text or pictures with particles.
npm install
npm i particle-drawer
const drawer = new ParticleDrawer();
drawer.draw('Hello World!');
Construct parameters
interface Options {
container?: string | Element, // The default value is body
width?: number, // The default value is 500
height?: number, // The default value is 800
particleRadius?: number, // Particle radius. The default value is 2
textFillColor?: string, // The particle fill color when drawing text. The default value is #55555555
textGap?: number, // The pick-up pixel interval when drawing text. The default value is 5
imgGap?: number, // The pick-up pixel interval when drawing image. The default value is 10
fontSize?: number,
lineGap?: number,
moveTime?: number,
fontFamily?: string,
}
cdn
<script src="https://cdn.jsdelivr.net/npm/particle-drawer"></script>
<script>
const drawer = new ParticleDrawer();
</script>
API
draw
Draw text or pictures into a container
async function draw (content: string|string[]|File, isImage?: boolean): void;
drawer.draw('Hello World!'); // single line text
drawer.draw(['Hello', 'World!']); // multi line text
drawer.draw(file); // draw image file
drawer.draw(src, true); // draw image src
TIP: You can use framing to draw gifs or videos
setSize
Dynamically set the container width and height
drawer.setSize(1000, 1000); // width and height
Set attributes
Dynamically set drawing properties
drawer.particleRadius = 4;
drawer.textFillColor = '#000';
drawer.textGap = 8;
drawer.imgGap = 12;
drawer.fontSize = 50;
drawer.lineGap = 10;
drawer.moveTime = 500;
drawer.fontFamily = 'monospace';