为什么宽度/高度元素属性的呈现方式与内联/CSS 样式不同？答案

【问题标题】：Why do width/height element attributes render differently from inline/CSS styles?为什么宽度/高度元素属性的呈现方式与内联/CSS 样式不同？
【发布时间】：2014-06-07 20:09:05
【问题描述】：

最近我一直在用 HTML5 和 Js 编写一个简单的平台游戏。我的背景图像的宽度为 600 像素，高度为 400 像素，根据我定义画布大小的方式不同，它的渲染方式也不同。

如果我使用元素属性并像这样定义它的大小：<canvas width="600" height="400"> 我得到了想要的结果；图像完美地位于画布内。

另一方面，如果我通过给画布一个 ID 来定义画布大小，然后在 CSS 文件中设置它的样式，如下所示：#canvas { width: 600px; height: 400px; }，或者简单地将其设置为内联样式，则图像看起来被拉伸并且根本没有'不适合画布，尽管值是相同的。

为什么这些声明方法的呈现方式不同？

【问题讨论】：

标签： javascript css html canvas

【解决方案1】：

画布尺寸和画布显示尺寸之间存在差异。

HTML 属性设置画布尺寸，这决定了如何测量您在画布上绘制的对象。

CSS 样式设置画布显示大小，它决定了画布在浏览器中的绘制大小。如果显示尺寸与尺寸不同，画布会在绘制时被拉伸。

如果您只定义尺寸，那也将用作显示尺寸，即画布以 1:1 的比例绘制。

如果只定义显示尺寸，尺寸将得到默认值 300 乘以 150。

【讨论】：

正确...只是换一种说法：当您增加元素大小时，实际上是在向画布元素添加像素。当您增加 css 大小时，您将 “拉伸”现有像素 到新大小。如果你不按相同的比例调整 css 的宽度和高度，那么这种拉伸会导致画布绘图出现扭曲。顺便说一句，调整元素的大小将导致画布上的任何现有绘图被擦除。使用 CSS 调整大小不会导致现有图形被擦除，但可能会导致失真。