酷炫的基于HTML5的2D和3D粒子引擎——Proton

html-css07

酷炫的基于HTML5的2D和3D粒子引擎——Proton,第1张

Proton是一个灵活的html5粒子引擎。他默认支持canvas,dom,webgl,easeljs,pixel五种渲染方式,当然你还可以轻易的自定义自己的渲染器。只需10几行代码就可以打造你想要的粒子效果。同时具有2D版本和3D版本,适合不同的使用场景!

2D版本:

3D版本:

3D版本:

下面通过录制的Gif来演示一部分效果,上面已经有一些了,下面再展示一些:

Proton是一个实现例子效果非常合适的2D和3D例子效果库,非常简单实用,从上面的动图效果也能看出来实现的效果非常的炫酷,而且代码非常简单,文档又非常详细!

1.Impact :支持桌面环境和移动端,支持所有主流浏览器: FIrefox, Chrome,, Safari, Opera 和 IE 。

2.Craftjs 是另外一个完美的游戏引擎,提供一个开发杰出游戏的接口,并且跨浏览器兼容。

3.playcraft 引擎提供给开发者许多工具集,帮助开发各种类型的游戏,这些工具集非常强大,可以让开发者自由发挥自己的各种想法,并且可以很容易转换到其他的平台,比如 Facebook,旧版的网站,原生 Android 和 iOS 应用等等。

4.Jaws 是个 HTML5 驱动的 2D 游戏库,刚开发的时候只能用来制作 canvas,现在支持通过同样的 API 来制作普通基于 DOM 的 sprites。支持的浏览器:Chrome 9+, Firefox 3.6+, Safari 5+ &IE9。

5.Enchant.js 是个简单的 JavaScript 框架,可以使用 HTML5 和 JavaScript 来开发简单的游戏和应用。现在还是由 UEI 的 Akihabara 研究中心来开发和维护。

一个最简单的案例:通过 canvas 元素来显示一个红色的矩形

<canvas id="myCanvas"></canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas')

var ctx=canvas.getContext('2d')

ctx.fillStyle='#FF0000'

ctx.fillRect(0,0,80,100)

</script>