canvas與webgl坐標轉換

1 canvas的坐標系

坐標原點在左上角，橫軸向右為X軸正方向，豎直向下為Y軸正方向  

2 webgl的坐標系

坐標原點在繪圖區域的中心點，橫向右為X軸正方向，豎直向上為Y軸正方向，橫縱坐標區域范圍為(-1,1)

 

3 坐標轉換

• 鼠標在瀏覽器客戶區點擊的位置為：(event.clientX,event.clientY)

• 那么在canvas中的坐標（x,y）就是：
  var rect = event.target.getBoundingClientRect();
  x = event.clientX-rect.left;
  y = - (event.clientY-rect.top);
  其中rect.left是canvas左邊界距離瀏覽器客戶區左邊界的位置，rect.top是canvas上邊界距離瀏覽器客戶區上邊界的位置，注意y坐標加符號是因為canvas中Y軸向下為正方向

• 在webgl中的坐標位置(x,y)則為：
  x = ( (event.clientX-rect.left) -canvas.width/2 )/(canvas.width/2);
  y = (canvas.height/2 - (event.clientY-rect.top))/(canvas.height/2);
  利用上一步從canvas坐標系轉換到webgl坐標系，主要的工作就是需要將坐標范圍映射到(-1,1)的范圍，其次是注意webgl中Y軸向上是正方向