HTML5特性system,HTML5 Canvas Particle System

HTML5 Canvas Particle System

With the HTML5 Canvas now a web standard, this small research project was

designed to test how a basic 2D particle system would look and perform

on modern web browsers. The code written for this demo was re-implemented

for use in Cosmos Fight

(a game project that a partner and I have been working on).

Your browser does not support the canvas element.

Click on the screen above, or press theToggle Animationbutton below!

Number of Particles:

60

Particle Lifespan:

10

Dispersion Range (degrees):

45

Direction Angle (degrees):

90

Particle Speed:

8

Particle Size:

1

Particle Color:

Fire

Red

Green

Violet

Blue

Toggle Animation

Reset All Values

Reset Position

When animating, move your mouse across the screen, and the particles will follow

your cursor.

Click on the screen to lock their position.

The Particle System source code is available under the MIT Licence and can be downloaded here.

Back To Misc Page