HTML5 WebGL粒子爆炸动画特效

1、新建html文档。

2、书写hmtl代码。<canvas id="c"></canvas><div>HTML5 WebGL酷炫粒子爆炸动画特效</div>

3、书写css代码。html { line-height: 1; }ol, ul { list-style多唉捋胝: none; }table { border-collapse: collapse; border-spacing: 0; }caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }q, blockquote { quotes: none; }q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }a img { border: none; }article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }body { overflow: hidden; }canvas { width: 100%; height: 100%; }

4、书写并添加js代码。<script id="shader-fs" type="x-shader/x-fragment"> #ifdef GL_ES precision highp float; #endif void main(void) { gl_FragColor = vec4(0.2, 0.3, 0.4, 1.0); } </script><script id="shader-vs" type="x-shader/x-vertex"> attribute vec3 vertexPosition;uniform mat4 modelViewMatrix;uniform mat4 perspectiveMatrix;void main(void) { gl_Position = perspectiveMatrix * modelViewMatrix * vec4( vertexPosition, 1.0);}</script><script src="js/index.js"></script>

5、代码整体结构。

6、查看效果。