3.绘制一个点(鼠标点击)

愿你出走半生,归来仍是少年！

        通过鼠标点击交互，实现在gl中绘制点。

1.知识点

1.1.点击坐标转换为Gl坐标

        通过canvas的点击事件将会获得鼠标在浏览器客户区中的坐标。通过移除canvas自身位置后可获取鼠标在canvas中的点击位置。同时通过canvas的长宽将坐标呢转换为Gl坐标。

坐标原点

浏览器坐标系

 

Gl坐标系

         通过如下公式可将坐标进行转换：

 x = ((x - rect.left) - rect.width / 2.0) / (rect.width / 2.0);

 y = (rect.height / 2.0 - (y - rect.top)) / (rect.height / 2.0);

2.代码

3.效果