最近我一直在用 HTML5 和 Js 编写一个简单的平台游戏。我的背景图像(宽度为 600 像素，高度为 400 像素)根据我定义 Canvas 大小的方式呈现不同。
如果我使用元素属性并像这样定义它的大小:<canvas width="600" height="400">我得到了想要的结果；图像完美地位于 Canvas 内。
另一方面，如果我通过给 Canvas 一个 ID 来定义 Canvas 大小然后像这样在 CSS 文件中设置样式:#canvas { width: 600px; height: 400px; } ，或简单地将其设置为内联样式，尽管值是相同的，但图像看起来会被拉伸(stretch)并且根本不适合 Canvas 。
为什么这些声明方法的呈现方式不同？
最佳答案
Canvas 尺寸和 Canvas 显示尺寸之间存在差异。
HTML 属性设置 Canvas 尺寸，它决定了如何测量您在 Canvas 上绘制的对象。
CSS 样式设置 Canvas 显示大小，决定了 Canvas 在浏览器中绘制的大小。如果显示尺寸与尺寸不同， Canvas 将在绘制时被拉伸(stretch)。
如果您只定义尺寸，它也将用作显示尺寸，即 Canvas 以 1:1 的比例绘制。
如果您只定义显示尺寸，尺寸将获得默认值 300 乘以 150。
关于javascript - 为什么 width/height 元素属性呈现与内联/CSS 样式不同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24101138/