JS-Snippet：获取鼠标在窗口、canvas、WebGL坐

//获取canvas元素的宽高
function getElementOfRect(element) {
    var rect = element.getBoundingClientRect();
    var eInfo = {
        width: rect.width,
        height: rect.height,
        top: rect.top,
        left: rect.left        
    };
    
    return eInfo;
}

//获取鼠标在浏览器窗口的坐标（始终以浏览器左上角为原点）
function getMouseOnWindow(event) {
    var wPos = {
        wx : event.clientX,
        wy : event.clientY
    };
    
    return wPos;
}

//根据鼠标在浏览器窗口的坐标，转化为鼠标在canvas元素上的坐标
function windowToCanvas(canvas, wx, wy) {
    var eInfo = getElementOfRect(canvas);
    var cx = wx - eInfo.left;
    var cy = wy - eInfo.top;
    
    var cPos = {
        cx : cx,
        cy : cy
    };
    
    return cPos;
}

//根据canvas坐标，转换为WebGL坐标
function cavasToWebGL(canvas, cx, cy) {
    //需要先获取canvas画布的宽高
    var width = getElementOfRect(canvas).width;
    var height = getElementOfRect(canvas).height;
    //先移动
    var gtx = cx - width / 2;
    var gty = height / 2 - cy;
    //后缩放
    var gsx = 2 * gtx / width;
    var gsy = 2 * gty / height;
    
    var gPos = {
        gx : gsx,
        gy : gsy
    };
    return gPos;
}

window.onload = function main() {
    var canvas = document.getElementById("webgl");

    canvas.onclick = function(event) {
        var width = getElementOfRect(canvas).width;
        var height = getElementOfRect(canvas).height;
        var top = getElementOfRect(canvas).top;
        var left = getElementOfRect(canvas).left;
        console.log("canvas元素的宽高为：\nW: " + width + " H: " + height + "\n此时距浏览器顶端和左端的距离分别是：\nTop: " + top + " Left: " + left);
        
        var wPos = getMouseOnWindow(event);
        console.log("\n此时鼠标点击时相对于浏览器窗口的位置是：\nX: " + wPos.wx + " Y:" + wPos.wy);

        var cPos = windowToCanvas(canvas, wPos.wx, wPos.wy);
        console.log("\n此时鼠标点击时相对于canvas元素的位置是：\nX: " + cPos.cx + " Y:" + cPos.cy);

        var gPos = cavasToWebGL(canvas, cPos.cx, cPos.cy);
        console.log("\n此时鼠标点击时相对于WebGL的位置是：\nX: " + gPos.gx + " Y:" + gPos.gy);
    }
}