css画布尺寸怎么调,在CSS中设置画布'宽度/高度'会导致令人惊讶的行为

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

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

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

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

HTML

__

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');