javascript - 在 CSS 中设置 Canvas 'width/height' 会导致令人惊讶的行为

Question

我有两个 HTML canvas 元素，我在它们上面画了一些线。

这两个 Canvas 基本相同，只是在一个 Canvas 中我使用标签属性 (canvas-1) 指定了宽度和高度，而在另一个 Canvas 中我使用 CSS 指定了宽度和高度 (canvas-2)。

我发现当我记录宽度和高度时(我在下面的 drawDividers 中执行此操作)，canvas-2 的高度是 150 而不是我预期的 300。令我惊讶的是，即使 height 非常错误，线条基本上还是在我预期的位置绘制的，除了模糊之外。这里发生了什么？是否有一个简单的 HTML/CSS/canvas 心智模型可以解释这一点？

我在 Windows 中使用 Chrome，以防相关。

此处演示:codepen link

HTML

<canvas id="canvas-1" class="outlined" width=300 height=300></canvas>
<span> __ </span>
<canvas id="canvas-2" class="outlined"></canvas>

CSS

#canvas-1 {
  outline-style: solid;
}
#canvas-2 {
  width: 300px;
  height: 300px;
  outline-style: solid;
}

Javascript

function drawDividers(eid) {
  var canvas = document.getElementById(eid);
  var width = canvas.width;
  var height = canvas.height;
  console.log(eid, width, height);
  var ctx = canvas.getContext('2d');
  ctx.lineWidth = 1;
  for (var i = 1; i <= 2; i++) {
    ctx.moveTo(i*width/3, 0.1*height);
    ctx.lineTo(i*width/3, 0.9*height);
    ctx.stroke();
    ctx.moveTo(0.1*width, i*height/3);
    ctx.lineTo(0.9*width, i*height/3);
    ctx.stroke();
  }
}

drawDividers('canvas-1');
drawDividers('canvas-2');

Answer 1

这是正在发生的事情:

Canvas 的默认宽度为 300 像素，高度为 150 像素。

如果您没有在标记中明确设置它们，您的 JavaScript 行

var width = canvas.width;
var height = canvas.height;

分别返回默认的300和150。

因此绘图是在 300x150 像素的区域中完成的，然后您的 css 将 Canvas 的大小调整为 300x300，因此会出现模糊。 (比如将图片调整到超出其原始尺寸时，会发生模糊。)