1.用户坐标系:右手直角坐标系,原点为左上角,X轴为水平方向(正方向向右),Y轴垂直(正方向向下),Z轴垂直于屏幕(正方向向外)
2.canvas坐标系:原点位于canvas中心,X轴水平向右,Y轴垂直向上,canvas左边缘为(1,0,0),上边缘为(0,1,0)
3.鼠标事件获取的用户坐标系转换到canvas坐标系:
(1)获取触发事件的对象相对于视口(用户坐标系)的大小及位置
(2)将用户坐标转换成相对于canvas左上角位置的坐标
(3)将坐标原点平移至canvas中心点
(4)将坐标映射至WebGL系统中的(-1,1)区间
var rect = event.target.getBoundingClientRect();
x = ((x-rect.left)-canvas.width/2)/(cnavas.width/2);
y = (canvas.height/2-(y-rect.top))/(canvas.height/2);