2d-canvas-image-particles 中文文档教程

发布于 3年前 浏览 22 项目主页 更新于 3年前

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-particlesyarn 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

Check the demo page

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+
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文