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

Posted 2023-05-07

【中文标题】如何在 div 中做响应式 HTML 画布

【英文标题】：How to do responsive HTML canvas within div

【发布时间】：2015-05-25 05:57:22

【问题描述】：

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

http://jsfiddle.net/4zx732ug/1/

<div>
<div class="left"> First Div </div>
<div class="middle">
<canvas  id="myCanvas"      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 响应画布？

【参考方案1】：

也许这对你有帮助。

HTML：

<div>
<div class="left"> First Div </div>
    <div class="middle">
        <canvas  id="myCanvas"  ></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 像素，因此在此端也强制夹紧。