html5 Canvas酷炫粒子图形变形动画特效

2024-11-02 10:53:32

1、新建html文档。

2、书写hmtl代码。<div id="jsi-particle-container" class="container"></div>

3、书写css代码。<style>html,body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;}.container{ width: 100％; height: 100%; margin: 0; padding: 0; background-color: #000000;}</style>

4、书写并添加js代码。<script src="js/jquery.min.js"></script><script>var RENDERER = { PARTICLE_COUNT : 1000, PARTICLE_RADIUS : 1, MAX_ROTATION_ANGLE : Math.PI / 60, TRANSLATION_COUNT : 500, init : function(strategy){ this.setParameters(strategy); this.createParticles(); this.setupFigure(); this.reconstructMethod(); this.bindEvent(); this.drawFigure(); },</script>

5、代码整体结构。

6、查看效果。