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

【问题标题】：How to do responsive HTML canvas within div如何在 div 中做响应式 HTML 画布
【发布时间】：2015-05-25 05:57:22
【问题描述】：

我有三个 div。第一个和第三个 div 有 Next - Previous 按钮。第二意味着中心 div 有一个 HTML 画布。所以我想让它响应。但最大画布高度应为 400 像素，最大宽度应为 300 像素。检查这个小提琴 -

<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 响应画布？

【问题讨论】：

标签： html css canvas

【解决方案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

【讨论】：

高度未调整大小。高度也应该像宽度一样调整大小
你可以在每个@media 中设置这个
所有三个 div 都应该水平放置。 div 正在更改为垂直。

【解决方案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 像素，因此在此端也强制夹紧。

【讨论】：