客户端区域坐标转换为 Canvas 坐标

通过 MouseEvent.clientX 和 MouseEvent.clientY 可以获得鼠标在浏览器客户端区域的坐标。借助 Element.getBoundingClientRect() 方法来实现客户端区域坐标与 canvas 坐标之间的转换。

function windowToCanvas (canvas, x, y) {
    var bbox = canvas.getBoundingClientRect();
    return {
        x : x - bbox.left,
        y : y - bbox.top
    };
}

上述方法将 canvas 元素的边界框的左上角点的坐标从窗口坐标中减去，从而得到鼠标在 canvas 元素区域中的坐标。

但是 canvas 元素本身的大小与元素绘图表面的大小可能存在不相等的情况。

对于 canvas 元素，在 HTML 中设置 <canvas> 标签的 width 属性和 height 属性实际上是同时修改了元素本身的大小与元素绘图表面的大小；而通过CSS来设定 canvas 元素的大小实际上只修改了元素本身的大小。

当元素本身的大小与元素绘图表面的大小不一致时，元素的绘图表面会进行缩放来适应元素本身的大小。

在获取鼠标的 canvas 坐标时，实际上是要获取绘图表面的坐标，因此要对坐标进行缩放。

function windowToCanvas (canvas, x, y) {
    var bbox = canvas.getBoundingClientRect();
    return {
        x : (x - bbox.left) * (canvas.width / bbox.width),
        y : (y - bbox.top) * (canvas.height / bbox.height)
    };
}

上述方法获取了鼠标在 canvas 元素区域中的坐标之后对坐标进行了缩放，从而获得了鼠标相对于 canvas 元素绘图表面的坐标。