2d-canvas-image-particles 中文文档教程
2D Particle System using Canvas
使用 Canvas 的简单轻量级 2D 粒子系统。
- Multiple particle systems can be bound to the same canvas
- Particles speed remain the same regardless of the refreshing rate
- Less than 10 KB
- Refresh rate independant : particles have the same behaviour between 60hz / 144hz monitors
Usage
- Create a canvas
- Import dist/2d-canvas-image-particles.min.js
- Create a new ParticleSystem :
new ParticleSystem(canvas_id, image_path, options);
Example
<canvas id="js-canvas"></canvas>
<script src="dist/2d-canvas-image-particles.min.js"></script>
<script>
new ParticleSystem('js-canvas', 'images/default-particle.png', {
cursorMode: CursorMode.Zoom
});
</script>
您可以查看 演示页面的更多示例来源。 您还可以使用 HTMLCanvasElement 而不是 id。
Usage with npm / Yarn
npm install 2d-canvas-image-particles
或 yarn add 2d-canvas-image-particles
。
然后您可以导入并使用它
import '2d-canvas-image-particles';
// ...
new ParticleSystem('id', 'images/default-particle.png', {
cursorMode: CursorMode.Zoom
});
您需要指定自己的图像。
Options
{
maxParticles: number,
velocityAngle: [min, max],
speed: [min, max],
rotationStartAngle: [min, max],
cursorMode: CursorMode, // (CursorMode.Bounce, CursorMode.Zoom, CursorMode.Light, CursorMode.Follow),
rotationMode: RotationMode, // (RotationMode.None, RotationMode.Random, RotationMode.FollowVelocity)
rotationSpeed: [min, max],
rotationSpeedSizeScale: number
minimumRotationSpeed: number // if min is negative and max is positive
tints: [new Tint('#hexColor', opacity)],
width: [min, max],
height: [min, max],
addOnClickNb: number,
density: number,
cursorRadius: number
}
Cursor Modes
- CursorMode.Bounce: particles will bounce off the cursor.
- CursorMode.Zoom: the closer the cursor is, the bigger the particles are.
- CursorMode.Light: works with Tint. Particles will enlight when cursor is close.
- CursorMode.Follow: generates particles that are following the cursor.
Rotation Modes
- RotationMode.None
- RotationMode.Random
- RotationMode.FollowVelocity: Will follow the specified velocity (use it with CursorMode.Bounce so the particles go back to their base velocity, this is used for the rain example)
Build from sources
npm install
npm run build
IE Support
- IE9+
2D Particle System using Canvas
A simple lightweight 2D particle system using Canvas.
- Multiple particle systems can be bound to the same canvas
- Particles speed remain the same regardless of the refreshing rate
- Less than 10 KB
- Refresh rate independant : particles have the same behaviour between 60hz / 144hz monitors
Usage
- Create a canvas
- Import dist/2d-canvas-image-particles.min.js
- Create a new ParticleSystem :
new ParticleSystem(canvas_id, image_path, options);
Example
<canvas id="js-canvas"></canvas>
<script src="dist/2d-canvas-image-particles.min.js"></script>
<script>
new ParticleSystem('js-canvas', 'images/default-particle.png', {
cursorMode: CursorMode.Zoom
});
</script>
You can check the demo page's sources for more examples. You can also use an HTMLCanvasElement instead of an id.
Usage with npm / Yarn
npm install 2d-canvas-image-particles
or yarn add 2d-canvas-image-particles
.
Then you can import it and use it
import '2d-canvas-image-particles';
// ...
new ParticleSystem('id', 'images/default-particle.png', {
cursorMode: CursorMode.Zoom
});
You will need to specify your own images.
Options
{
maxParticles: number,
velocityAngle: [min, max],
speed: [min, max],
rotationStartAngle: [min, max],
cursorMode: CursorMode, // (CursorMode.Bounce, CursorMode.Zoom, CursorMode.Light, CursorMode.Follow),
rotationMode: RotationMode, // (RotationMode.None, RotationMode.Random, RotationMode.FollowVelocity)
rotationSpeed: [min, max],
rotationSpeedSizeScale: number
minimumRotationSpeed: number // if min is negative and max is positive
tints: [new Tint('#hexColor', opacity)],
width: [min, max],
height: [min, max],
addOnClickNb: number,
density: number,
cursorRadius: number
}
Cursor Modes
- CursorMode.Bounce: particles will bounce off the cursor.
- CursorMode.Zoom: the closer the cursor is, the bigger the particles are.
- CursorMode.Light: works with Tint. Particles will enlight when cursor is close.
- CursorMode.Follow: generates particles that are following the cursor.
Rotation Modes
- RotationMode.None
- RotationMode.Random
- RotationMode.FollowVelocity: Will follow the specified velocity (use it with CursorMode.Bounce so the particles go back to their base velocity, this is used for the rain example)
Build from sources
npm install
npm run build
IE Support
- IE9+