4.每次点击绘制一个点

本文介绍如何在WebGL中实现用户坐标到canvas坐标的转换,并解释了使用匿名函数的原因及每次点击设置背景色的重要性。通过具体代码示例,详细展示了如何在WebGL环境中绘制动态响应用户输入的点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

重点: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);
    }
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值