Question

我有三个div。第一个和第三个div有Next - Previous按钮。第二个意思是中心div有一个HTML画布。所以我想让它变得敏感。但最大画布高度应为400px，最大宽度应为300px。检查这个小提琴 -

<div>
<div class="left"> First Div </div>
<div class="middle">
<canvas  id="myCanvas"  height="400" width="300"   style="border:1px solid #000000;"></canvas>
</div>
<div class="right"> Third Div </div>
</div>

CSS -

.left {
float: left;
background-color: #ddd;
}

.middle {
background-color: yellow;
float: left;
}

.right {
float: left;
background-color: #ddd;
}

那么如何让这个div响应画布？

Answer 1

也许这有助于你。

<强> HTML：

<div>
<div class="left"> First Div </div>
    <div class="middle">
        <canvas  id="myCanvas"  height="400"></canvas>
    </div>
    <div class="right"> Third Div </div>
</div>

<强> CSS：

.left {
    float: left;
    background-color: #ddd;
}
.middle {
    background-color: yellow;
   float: left;
   border:1px solid #000000;
   width: 300px;
}
.right {
    float: left;
    background-color: #ddd;
}
@media all and (max-width: 450px) {
    .middle {
        width: calc(69% - 10px);
    }
}
@media all and (max-width: 410px){
    .middle {
        width: calc(67% - 10px);
    }
}
@media all and (max-width: 360px){
    .middle {
        width: calc(60% - 10px);
    }
}

<强> DEMO

Answer 2

要使画布遵循div，假设您已将CSS应用于div（这对于此工作很重要），您可以使用div的边界客户端矩形来制作位图匹配此父div的大小。

在DOM加载初始化时调用，以及在窗口调整大小事件时调用：

var rect = document.querySelector(".middle").getBoundingClientRect();
var canvas = document.getElementById("myCanvas");

canvas.width  = Math.max(1, Math.min(400, rect.width));
canvas.height = Math.max(1, Math.min(300, rect.height));

由于画布位图不能小于1像素，因此也会强制进行钳位。

如何在div中做响应式HTML画布

2 个答案: