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