<canvas style="border: red solid 3px;" id='webgl' width='500' height='500'>不支持</canvas>
<script>
//顶点着色器程序
var VSH =
'attribute vec4 a_Position;\n' +
'attribute float a_PointSize;\n' +
'void main(){\n' +
'gl_Position = a_Position;\n' + //坐标
'gl_PointSize = a_PointSize;\n' + //尺寸
'}\n';
//片元着色器程序
var FSH =
'void main(){\n' +
'gl_FragColor = vec4(1.0,0.5,0.9,1.0);\n' + //颜色
'}\n';
var canvas = document.getElementById('webgl');
var gl = getWebGLContext(canvas);
initShaders(gl, VSH, FSH); //初始化着色器
var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); //获取attribute -> a_Position变量的存储地址
gl.vertexAttrib3f(a_Position, 0.5, 0.0, 0.0); //将顶点的位置传给attribute变量
var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize'); //获取attribute -> a_PointSize变量的存储地址
gl.vertexAttrib1f(a_PointSize, 150.0); //将顶点的位置传给attribute变量
gl.clearColor(0.0, 0.0, 1.0, 1.0); //指定背景色
gl.clear(gl.COLOR_BUFFER_BIT); //填充
gl.drawArrays(gl.POINTS, 0, 1); //绘制一个点
/*
因为绘制的是单独的点,所以是gl.POINTS
第二个参数为0,表示从第一个顶点画起
第三个参数为1,表示在程序中只绘制了一个点
*/
</script>