canvas坐标系转webgl坐标系

 红色的canvas坐标系，蓝色是webgl坐标系 

需要注意的地方有三点

1. 坐标原点不同，需要将canvas的中间位置作为webgl的原点，求出绿色的点相对于canvas中间位置的偏移量
2. 求出绿色的点 相对于canvas中间位置的偏移量 对应的webgl的位置
3. 处理y轴，canvas的y向下，webgl的y轴向上，需要将 y 的值取反

代码为鼠标点击canvas，获取当前的点的webgl坐标

canvas.addEventListener('click', (e) => {// 第一步：e.clientX 是鼠标在网页中的位置，需要根据 e.clientX 求出鼠标在canvas中的位置const { clientX, clientY } = econst { top, left } = canvas.getBoundingClientRect();const [canvasX, canvasY] = [clientX - left, clientY - top]// 第二步：求canvas中的坐标值对应的webgl的坐标值// 1、处理原点，以canvas的中间位置(canvas.width/2,canvas.height/2)作为webgl的原点(0,0)，求出鼠标当前位置在canvas系统中相对于webgl中的位置const canvasOffsetX = canvasX - canvas.width / 2const canvasOffsetY = canvasY - canvas.height / 2// 2、将canvas系统中的坐标值转换成webgl中的值const canvas2WebglX = canvasOffsetX / (canvas.width / 2)const canvas2WebglY = canvasOffsetY / (canvas.height / 2)// 3、处理y轴，canvas的y向下，webgl的y轴向上const canvas2WebglY2 = -canvas2WebglY;// canvas2WebglX 即为鼠标点在webgl中的x，canvas2WebglY2 即为鼠标点在webgl中的y
})