重点:1 . 用户坐标转换成canvas坐标 2 . 为什么使用匿名函数 3 . 为什么每次点击都要设置背景色
var VSHADER_SOURCE =
'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 FSHADER_SOURCE =
'void main(){' +
'gl_FragColor = vec4(0.0,1.0,0.0,1.0);\n' +
'}\n';
function main()
{
var canvas = document.getElementById("webgl");
var gl = canvas.getContext('webgl');
initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE);
//注意:getAttribLocation方法中的变量名是在着色器代码中查找,所以要加引号
var a_Position = gl.getAttribLocation(gl.program,'a_Position');
var a_PointSize = gl.getAttribLocation(gl.program,'a_PointSize');
//使用匿名函数是为了让定义的函数能够使用main中的变量,否则绑定onmousedown事件的函数只能有一个参数(ev即事件)
canvas.onmousedown = function(ev){
click(ev,gl,canvas,a_Position);
};
gl.vertexAttrib1f(a_PointSize,10.0);
gl.clearColor(1.0,0.0,0.0,1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
}
var g_points = [];
function click(ev,gl,canvas,a_Position)
{
var x = ev.clientX;//获取用户点击处的用户坐标
var y = ev.clientY;
var rect = ev.target.getBoundingClientRect(); //获取触发事件对象(canvas)在用户坐标系统中的rect(坐标)
//用户坐标转换到canvas坐标
x = ((x-rect.left)-rect.width/2)/(rect.width/2);
y = (rect.height/2-(y-rect.top))/(rect.height/2);
g_points.push(x);
g_points.push(y);
gl.clear(gl.COLOR_BUFFER_BIT);//指定背景色,因为默认WebGL在绘制完点之后会将颜色缓冲区重置为默认值
for(i=0;i<g_points.length-1;i+=2)
{
gl.vertexAttrib2f(a_Position,g_points[i],g_points[i+1]);
gl.drawArrays(gl.POINTS,0,1);
}
}