调整画布大小以适应网格中的父助推段单元格

Question

我正在使用boostrap网格设计一个仪表板。有些单元格中有一个canvas，我想强制它与其父单元格的大小相匹配。我基本上是这样计算大小的：

var parent = canvas.parentElement;
if (parent.style) {
var parentStyle = window.getComputedStyle(parent, null);
var w = parseFloat(parentStyle.width) - (parseFloat(parentStyle.paddingLeft) + parseFloat(parentStyle.paddingRight) + parseFloat(parentStyle.borderLeftWidth) + parseFloat(parentStyle.borderRightWidth));
var h = parseFloat(parentStyle.height) - (parseFloat(parentStyle.paddingTop) + parseFloat(parentStyle.paddingBottom) + parseFloat(parentStyle.borderTopWidth) + parseFloat(parentStyle.borderBottomWidth));
canvas.width = w;
canvas.height = h;
}

然而，当我调整页面、画布或单元格的大小时，它们的高度似乎一直在增长，我不明白为什么。

在"整页"中运行以下示例，并水平调整窗口大小。你会看到细胞是如何保持高度生长的。

function resizeCanvas(canvas) {
var parent = canvas.parentElement;
if (parent.style) {
var parentStyle = window.getComputedStyle(parent, null);
var w = parseFloat(parentStyle.width) - (parseFloat(parentStyle.paddingLeft) + parseFloat(parentStyle.paddingRight) + parseFloat(parentStyle.borderLeftWidth) + parseFloat(parentStyle.borderRightWidth));
var h = parseFloat(parentStyle.height) - (parseFloat(parentStyle.paddingTop) + parseFloat(parentStyle.paddingBottom) + parseFloat(parentStyle.borderTopWidth) + parseFloat(parentStyle.borderBottomWidth));
canvas.width = w;
canvas.height = h;
}
}
function paintOnCanvas(canvas) {
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font = "20px Verdana";
ctx.fillStyle = "black";
ctx.fillText("Paint on Canvas", 10, 50);
}
document.addEventListener("DOMContentLoaded", function(event) {
paintOnCanvas(document.getElementById("canvas"));
});
window.addEventListener('resize', function(event) {
resizeCanvas(document.getElementById("canvas"));
paintOnCanvas(document.getElementById("canvas"));
});

canvas {
background-color: #ce8483;
width: 100%;
height: 100%;
}
.col-sm-6 {
border: 1px #2e6da4 solid;
padding: 15px 15px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<canvas id="canvas"></canvas>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
</div>
</div>

Answer 1

您应该使用.offsetWidth和.offsetHeight属性
请注意，它们属于元素，而不是.style.
引用自：如何检索HTML元素的实际宽度和高度？

我添加了一个最小大小的div，使画布具有最小的高度。你可以看到，如果你删除该分区会发生什么。

function resizeCanvas(canvas) {
var parent = canvas.parentElement;

canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;
}
function paintOnCanvas(canvas) {
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font = "20px Verdana";
ctx.fillStyle = "black";
ctx.fillText("Paint on Canvas", 10, 50);
}
document.addEventListener("DOMContentLoaded", function(event) {
resizeCanvas(document.getElementById("canvas"));
paintOnCanvas(document.getElementById("canvas"));
});
window.addEventListener('resize', function(event) {
resizeCanvas(document.getElementById("canvas"));
paintOnCanvas(document.getElementById("canvas"));
});

canvas {
position:absolute;
left: 0;
top: 0;
}
.col-sm-6 {
border: 1px #2e6da4 solid;
padding: 15px 15px;
height: 200px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<canvas id="canvas"></canvas>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
</div>
</div>

EDIT:
我在.col-sm-6CSS类中看到一个拼写错误
height: 200px;没有:。

现在不需要额外的div了。