Question

当我注意到一些奇怪的东西时，我试图在画布上绘制一个圆圈 - 基本上当我定义画布时#c;通过CSS的尺寸，元素超出规模 - 就像看起来＆＃34;压扁＆＃34;。

但如果我通过＆＃34;宽度设置尺寸＆＃34;和＆＃34;身高＆＃34; HTML属性，它正常呈现。

＆＃13;

$(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);

});

＆＃13;

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

＆＃13;

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

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

感谢。

Answer 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%，图像将缩放以适应布局，同时保持宽高比{{ 3}}

Answer 2

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

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

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

2 个答案: