Question

我在基于画布的应用程序上工作，我需要动态调整画布大小。问题是，通过CSS设置宽度和高度会拉伸画布而不是实际加宽绘图表面。您需要在像素中通过html宽度和高度属性进行设置。这就是问题所在：我希望它能填满表格单元格。

我得到了一个解决方案，这要归功于我在另一个SE答案中找到的几行javascript。

canvas.width  = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

offsetWidth属性将CSS高度考虑在内，因此可用于将100％高度转换为像素值。所以我们让css调整canvas元素的大小，我们JS用来调整绘图表面的大小...... 但它似乎只在尝试使画布增长时起作用。

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

看看这个小提琴。在调整结果窗口大小时，画布会重新绘制并调整大小，因此红色方块始终具有相同的宽高比。但是，当您尝试缩小窗口时，画布保持相同的大小，溢出身体下方！我添加了css代码以在body下面绘制一个边框来显示它。

在firefox中，画布上的CSS高度100％似乎比页面宽，而不是相对于父页面。从小提琴中移除JS并尝试它，画布很大。

我在这里解决了chrome问题： http://jsfiddle.net/yb6e9mwa/2/

updateCanvasSize = function() {
    canvas.width = 0;
    canvas.height = 0;
    canvas.style.width = "1px";
    canvas.style.height = "1px";

    setTimeout(_updateCanvasSize, 0);
};

_updateCanvasSize = function() {
  canvas.style.width = "100%";
  canvas.style.height = "100%";
  canvas.width  = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
  drawCanvas();
};

这非常简单，我只是将高度和CSS高度设置为0px，等待它渲染，然后将其设置回原来的状态。它工作正常，即使这意味着在调整窗口大小时你无法看到画布。

然而，对Firefox的修复将画布设置为恒定的1px高。浏览器有什么问题，或者我做错了什么？

Answer 1

表格自动拉伸以适应内容的方式似乎是一个问题，即使这意味着身体溢出。我使用css resize属性（仅限Chrome / Firefox）进行了快速测试。 http://jsfiddle.net/dods7dpk/

所以我做了KenFyrstenberg所说的并改为使用了div。由于div不会自动将高度分配给孩子，因此我必须将中间行设置为top: 20px; bottom: 20px;以使其自动伸展。

http://jsfiddle.net/aL3kayLs/2/

<body>
    <div class="fillParent" style="position:relative;">
        <div style="height:20px; width:100%;">
            <div class="fillParent">Test</div>
        </div>
        <div style="position:absolute; top:20px; bottom: 20px; width:100%;">
            <div class="fillParent">
                <canvas class="fillParent" width="100" height="100">
                    Your browser is not compatible with HTML5 canvas.
                </canvas>
            </div>
        </div>
        <div style="position: absolute; bottom: 0px; height:20px; width:100%;">
            <div>Test</div>
        </div>
    </div>
</body>

body{
    border-bottom: 1px solid black;
}

html, body, .fillParent {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

table {
  table-layout: fixed;
}

canvas {
    background-color: rgba(0,0,255,0.5);
}

如果您不需要与旧浏览器兼容（IE8及之前），mido22的解决方案更清晰，使用CSS calc函数。

清理代码版本：http://jsfiddle.net/dsnqr5m2/2/

<body>
    <div class="fillParent">
        <div class='header'>
            <div class="fillParent">Test</div>
        </div>
        <div class='middle'>
            <div class="fillParent">
                <canvas class="fillParent" width="100" height="100">
                    Your browser is not compatible with HTML5 canvas.
                </canvas>
            </div>
        </div>
        <div class='footer'>
            <div>Test</div>
        </div>
    </div>
</body>

html, body, .fillParent {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.header, .footer{
    height:20px;
}

.middle{
    height:calc(100% - 40px);
}

canvas {
    background-color: rgba(0,0,255,0.5);
}

为什么这个画布会不断增长？（动态调整画布大小）

1 个答案:

为什么这个画布会不断增长？ （动态调整画布大小）

1 个答案:

为什么这个画布会不断增长？（动态调整画布大小）