HTML宽度属性和CSS宽度属性（画布）之间的区别？ [复制]答案

【问题标题】：Difference between HTML width attribute and CSS width property (canvas)? [duplicate]HTML宽度属性和CSS宽度属性（画布）之间的区别？ [复制]
【发布时间】：2016-04-17 13:59:21
【问题描述】：

当我注意到一些奇怪的东西时，我正试图在画布上画一个圆圈 - 基本上，当我通过 CSS 定义画布的尺寸时，元素超出了比例 - 看起来像是“被压扁了”。

但如果我通过“宽度”和“高度”HTML 属性设置尺寸，它会正常呈现。

$(document).ready(function() {

  function highlightAreaTrial(elementId, x, y, radius) {
    console.log("x, y: " + x + ", " + y);
    canvas = document.getElementById(elementId);
    ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2*Math.PI);
    ctx.strokeStyle="#FF0000";
    ctx.stroke();
  }

  highlightAreaTrial("trial", 50, 50, 20);
  highlightAreaTrial("myCanvas", 50, 50, 20);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="trial" style="height: 100px; width: 100px; border: 1px solid black;"></canvas>
    
<canvas id="myCanvas" width="100" height="100" style="border:1px solid #d3d3d3;"></canvas>

这是一个小提琴：https://jsfiddle.net/codeapprenti/vnoukemm/

有人可以解释这种行为吗？

谢谢。

【问题讨论】：

我已更新您的问题，以便两个示例使用相同的维度来重现您所描述的问题。
CSS 用于像素。您可以在 CSS 中设置上下左右的像素数。元素属性是屏幕显示尺寸并定义页面/窗口的大小。虽然只有在标记中有画布时才会出现这种情况。如果您在 Javascript 中创建画布，元素的宽度和高度属性也会设置画布像素分辨率。
您的问题经常在这里被问到。使用 CSS 调整画布大小时，您正在拉伸（或挤压）像素，直到原始绘图适合新的 CSS 尺寸。将其视为带有徽标的 T 恤。如果您拉伸衬衫，徽标会因拉伸而变形……与画布图纸相同——它们会拉伸和收缩。另一方面，更改画布元素的宽度/高度 (canvas.width=400) 您实际上是在向画布绘图表面添加或删除像素——因此不会发生变形。如果这有意义，您可能会删除您的问题 b/ 它是重复的。 ;-)
@markE 解释很清楚，但只是为了尊重每个努力评论和回答的人，我想我会保留它。不过谢谢。 :)

标签： jquery html css canvas

【解决方案1】：

根据相关规范：

4.8.11 The canvas element — HTML5

canvas元素有两个属性来控制坐标空间的大小：width和height。这些属性在指定时必须具有有效的非负整数值。必须使用解析非负整数的规则来获取它们的数值。如果缺少某个属性，或者如果解析其值返回错误，则必须使用 默认值。 width属性默认为300，height属性默认为150。

^{已添加重点。}

在您的情况下，由于第一个元素 #trail 没有 width 或 height 属性，因此属性值默认为 width="300" height="150"，这就是您看到差异的原因。

本质上，width/height 属性设置画布坐标空间的固有尺寸，而 CSS 属性设置canvas 元素的实际大小：

canvas 元素的固有尺寸等于坐标空间的大小，数字以 CSS 像素解释。但是，可以通过样式表任意调整元素的大小。在渲染过程中，图像会被缩放以适应此布局大小。

因此，如果您为canvas 元素赋予width="100" height="100" 属性，然后将CSS 宽度设置为100%，则图像将被缩放以适应布局，同时保持纵横比(example)。

【讨论】：

非常有帮助 - 所以当你缩放它时，它会变得模糊。谢谢。

【解决方案2】：

height 和 width 属性定义画布的固有大小（坐标空间）。默认情况下，它也会以该大小呈现。

如果更改 CSS width 和 height，画布将以新的大小呈现，但坐标空间不会改变。所以相同的内容将被缩放以适应画布的渲染大小。

【讨论】：