Javascript 为什么HTML画布有两种不同的大小？

我目前正在从事一个HTML/Javascript项目，我正在使用HTML画布和Context2D进行绘图。 或多或少，我画的是2d世界的一部分，没有固定的瓷砖大小

let width = canvas.width;
let height = canvas.height;
let cellHeight = height/rows * viewSizeMultiplier.y,cellWidth = width/columns * viewSizeMultiplier.x;

viewSizeMultiplier类似于地图上8个瓷砖的1/8。我在点击画布时得到了一个特定的平铺，这是因为Canvas.size不会通过调整窗口大小来自我调整

.canvas { 
   width: 60%;
   height: 80%;
   left:5%;
   top:10%;
}

这就是我用css实现画布的方式。为了在我的屏幕上获得当前的瓷砖，我必须计算不同尺寸的纵横比，如下所示：

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    
    }
  }

所以我的问题是为什么画布有两种不同的尺寸？如果使用canvas.size，它会调整分辨率吗

添加的代码段：

let canvas=document.getElementsByClassName（'canvas'）[0]；
const canvasWidth=canvas.width；
const actualWidth=canvas.getBoundingClientRect（）.width；
console.log（画布宽度、实际宽度）//300, 522

CSS样式在画布首次创建后不会更改画布的像素尺寸。您需要特别地将

和

canvas.height

设置为新的尺寸，以更改画布的像素大小，否则您将只得到缩放为不同大小的原始宽度*高度像素

---

您需要侦听调整大小事件，以了解何时更改画布的维度。

好的，画布的内部维度可能不同于画布DOM元素的维度

canvas.width

为您提供画布内部宽度，而

rect.width

仅为您提供画布DOM元素的外部宽度，不包括绘制超出外部宽度且需要滚动才能到达的画布的任何部分。高度也是如此

---

因此，简而言之，每当您需要滚动查看画布中的所有内容时，这意味着您画布的内部尺寸大于外部尺寸。

请创建代码段示例。这是一个简单的画布2D。然后你会得到快速的回答。哇，谢谢你的快速回答。我的渲染函数中的这段代码修复了分辨率问题if（canvas.getBoundingClientRect（）.width！=canvas.width）{canvas.width=canvas.getBoundingClientRect（）.width；}if（canvas.getBoundingClientRect（）.height！=canvas.height=canvas.getBoundingClientRect（）.height；}