3.坐标系统

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);