客户端区域坐标转换为 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元素绘图表面的坐标。