在CSS中设置画布“宽度/高度”会导致令人惊讶的行为
在CSS中设置画布“宽度/高度”会导致令人惊讶的行为
提问于 2016-06-06 20:51:31
我有两个HTML画布元素，并在它们上画了一些线。
这两个画布基本上是相同的，除了一个我已经指定宽度和高度使用标签属性(画布-1)，在另一个我指定的宽度和高度在CSS (画布-2)。
我发现当我记录宽度和高度时(我在下面的drawDividers中这样做)，canvas-2的高度是150，而不是我所期望的300。我发现令人惊讶的是，即使height非常错误，这些线基本上是按照我的预期绘制的，除非是模糊的。这里发生什么事情？有没有一个简单的心理模型，我可以采用的HTML/CSS/画布，可以解释这一点？
我在Windows的Chrome上，以防与之相关。
这里的演示：代码链接
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');回答 1
Stack Overflow用户
回答已采纳
发布于 2016-06-06 21:17:12
这就是正在发生的事情：
画布的默认宽度为300像素，高度为150像素。
当没有在标记中显式设置它们时，您的JavaScript行
var width = canvas.width;
var height = canvas.height;分别返回默认的300和150。
因此，绘图是在300x150像素的区域内完成的，然后css将画布调整为300x300，因此出现模糊。(就像当图片的大小超出原始大小时，就会出现模糊。)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37666696
复制相关文章
相似问题
腾讯云开发者
