canvas画布当中鼠标点击的坐标计算公式

// canvas画布当中的画笔坐标万能计算公式
// pointX = (transformOriginX - downX)/scale *(scale - 1) + downX - translateX
// pointY = (transformOriginY - downY)/scale *(scale - 1) + downY - translateY

// 备注：transformOrigin表示transform 变化的基点
//	downX\downY 表示鼠标按下时的横纵坐标
//    scale 表示缩放的倍数  默认值为1
//  translateX\translateY 表示平移的距离
    
测试代码：
const box = document.getElementsByClassName("box");
box.onmousedown = function(e){
    // 计算的是鼠标点击的坐标  因此需要减去容器本身的偏移量
    const downX = e.pageX - box.offsetLeft;
    const downY = e.pageY - box.offsetTop;
    const scale	= 2;
    const translateX = -40;
    const translateY = -40;
    const transformOriginX = 120;
    const transformOriginY = 120;
    const goal = document.getElementsByClassName("goal");
    goal.style.left = (transformOringinX - downX)/scale*(scale-1) + downX - translateX + 'px';
    goal.style.left = (transformOriginY - downY)/scale*(scale - 1) + downY - translateY + 'px';
}