html5粒子引擎 proton,Proton

Proton

网站描述:一个 JavaScript 粒子引擎

Proton 介绍

Proton是一个灵活的html5粒子引擎。他默认支持canvas,dom,webgl,easeljs,pixel五种渲染方式，当然你还可以轻易的自定义自己的渲染器。只需10几行代码就可以打造你想要的粒子效果。

Proton安装

npm install proton-js --save

...

import Proton from 'proton-js';

使用

var proton = new Proton();

var emitter = new Proton.Emitter();

//set Rate

emitter.rate = new Proton.Rate(Proton.getSpan(10,20),0.1);

//add Initialize

emitter.addInitialize(new Proton.Radius(1,12));

emitter.addInitialize(new Proton.Life(2,4));

emitter.addInitialize(new Proton.Velocity(3,Proton.getSpan(0,360),'polar'));

//add Behaviour

emitter.addBehaviour(new Proton.Color('ff0000','random'));

emitter.addBehaviour(new Proton.Alpha(1,0));

//set emitter position

emitter.p.x = canvas.width / 2;

emitter.p.y = canvas.height / 2;

emitter.emit(5);

//add emitter to the proton

proton.addEmitter(emitter);

// add canvas renderer

var renderer = new Proton.CanvasRenderer(canvas);

proton.addRenderer(renderer);

//use Euler integration calculation is more accurate (default false)

Proton.USE_CLOCK = false or true;