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

Posted 2023-03-05

技术标签:

【中文标题】HTML宽度属性和CSS宽度属性（画布）之间的区别？ [复制]【英文标题】：Difference between HTML width attribute and CSS width property (canvas)? [duplicate] 【发布时间】：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"   style="border:1px solid #d3d3d3;"></canvas>

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

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

谢谢。

【问题讨论】：

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