<分区>
我目前正在开发一个 HTML/Javascript 元素，我在其中使用 HTML Canvas 和 Context2D 进行绘图。 或多或少，我正在绘制一个没有固定图 block 大小的二维世界的一部分。
let width = canvas.width;
let height = canvas.height;
let cellHeight = height/rows * viewSizeMultiplier.y,cellWidth = width/columns * viewSizeMultiplier.x;
viewSizeMultiplier 相当于 map 上 8 个 Tiles 的 1/8。单击 Canvas 时获取特定的 Tile 使我感到很吃力，因为 canvas.size 不会通过调整窗口大小来自行调整。
.canvas {
width: 60%;
height: 80%;
left:5%;
top:10%;
}
这就是我在 CSS 中实现 Canvas 的方式。为了在我的屏幕上显示当前的 Tile，我必须像这样计算不同尺寸的纵横比:
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect(),
scaleX = canvas.width / rect.width,
scaleY = canvas.height / rect.height;
return {
x: (evt.clientX - rect.left) * scaleX,
y: (evt.clientY - rect.top) * scaleY
}
}
所以我的问题是为什么会有 2 种不同尺寸的 Canvas ？如果它使用 canvas.size 大小，它会调整它的分辨率吗？
添加的代码段:
let canvas = document.getElementsByClassName('canvas')[0];
const canvasWidth= canvas.width;
const actualWidth =canvas.getBoundingClientRect().width;
console.log(canvasWidth,actualWidth);//300 , 522