4.每次点击绘制一个点

最新推荐文章于 2021-09-15 15:40:50 发布

angry ant

最新推荐文章于 2021-09-15 15:40:50 发布

阅读量231

点赞数

CC 4.0 BY-SA版权

分类专栏： WebGL 文章标签： javascript canvas webgl

本文链接：https://blog.youkuaiyun.com/j_oop/article/details/108310116

WebGL 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何在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);
    }
}