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、查看效果。