Question

我有两个HTML canvas元素，我在它们上画了几行。

这两个画布基本相同，只是在一个我使用标签属性（canvas-1）指定了宽度和高度，另一个我在CSS（canvas-2）中指定了宽度和高度。 / p>

我发现当我记录宽度和高度时（我在下面的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

这就是发生的事情：

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

当您未在标记中明确设置它们时，您的JavaScript行

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

分别返回默认值300和150.

因此绘图是在300x150像素的区域内完成的，然后你的css将画布大小调整为300x300，因此会出现模糊现象。（比如在将图片尺寸调整到超出原始尺寸时，会发生模糊处理。）

在CSS中设置画布'宽度/高度'会导致令人惊讶的行为

1 个答案: