如何将浏览器中的坐标转换为 canvas 中的坐标

function convertToCanvas(canvas, x, y} {
	const canvasElement  = canvas.getBoundingClientRect() ;
	return { x: (x- canvasElement.left)*(canvas.width  / canvasElement.width),
			y: (y - canvasElement.top)*(canvas.height / canvasElement.height)
	}
}

转换的逻辑是先使用鼠标事件中相对于浏览器文档的坐标减去 canvas 左上角的坐标，然后进行相应的缩放,之所以要进行缩放，是因为 canvas 在页面中显示的大小和实际的大小不一定是 1:1 的关系, 这是因为 canvas 实际的大小是通过 canvas 标签的 width 、 height 属性指定的，而显示的大小可以通过 css 来指定，这是两套互相独立的值，从而导致显示的大小和实际的大小不 定是 1:1 的关系 例如， canvas 本身的宽和高分别是 300 、150 ，而 css中设置为 600 、 600 ，那么 canvas 轴方向的 个像素显示到页面中的就是 2个像素，而canvas中y 轴方向的 1个像素显示到页面中是4个像素，因此需要进行缩放。