画布渲染分辨率 - 如何在 flex 布局中使用画布答案

【问题标题】：Canvas rendering resolution - how to use a canvas in a flex layout画布渲染分辨率 - 如何在 flex 布局中使用画布
【发布时间】：2020-03-21 07:44:35
【问题描述】：

我正在使用 flex 环境来自动缩放具有固定边和标题的容器（在文档准备好时使用 jquery 加载标题）。

--------------
|  header    |
--------------
|  |canvas|  |
|  |      |  |
--------------

有 2 个 flex 环境，一个从上到下（列），一个从左到右（行）。

如果不考虑画布，这似乎可以正常工作。当页面加载并应用 flex 时，画布会被缩放，它的大小会发生变化，同时保持上下文的“渲染”宽度/高度相同。这会导致图像以小分辨率渲染并被拉伸。

为了解决这个问题，在渲染之前我每次都运行这个函数：

Map._resizeCanvas = function (canvas) {
    let displayWidth = canvas.clientWidth;
    let displayHeight = canvas.clientHeight;

    if(displayWidth !== canvas.width || displayHeight !== canvas.height) {
        canvas.width = displayWidth;
        canvas.height = displayHeight;
    }
};

这在大多数情况下都有效，但会导致图像被拉伸几个像素（沿 X）。有时它会导致页眉消失或增加页面高度，从而添加滚动条。

如何在 flex 环境中使用画布？设置画布宽度时有什么需要考虑的吗？（像margin，paddings，我已经把显示样式设置为block，inline破坏了整个页面）

有没有办法在不改变布局和影响页面的情况下设置上下文的渲染分辨率？

HTML：

<body>

<div id="header-navigation"></div> <!-- set by jquery on document ready -->

<div id="page-container">
    <div class="container" id="container1">
        abc
        <div style="height: 50pt;"></div>
    </div>

    <div class="container" id="container2">
        <canvas id="canvas1" style="width: 100%; height: 100%; display: block"></canvas>
    </div>

    <div class="container" id="container3">
        abc
        <div style="height: 50pt;"></div>
    </div>
</div>

</body>

CSS：

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
}

p {
    margin: 0;
}

#header-navigation {
    overflow: hidden; /* FIXME, in the flex environment, this also overflows in width */
    flex: 0 1 auto;
}

#page-container {
    margin: 5pt;
    flex: 1 1 auto; /* part of the column flex layout */

    display: flex; /* contains the row flex */
    flex-flow: row;
}

.container {
    height: 100%;
    margin-left: 5pt;
    margin-right: 5pt;
}

#container1 {
    background: lightgray;
    flex: 0 1 15%;
}

#container2 {
    flex: 1 1 auto;
}

#container3 {
    background: lightgray;
    flex: 0 1 15%;
}

#canvas1 {
    width: 100%;
    height: 100%;
}

【问题讨论】：

标签： javascript html css html5-canvas

【解决方案1】：

我的主要问题是 flex 参数中的收缩值。它允许顶部栏在减小页面大小时消失。

我没有找到解决画布渲染分辨率与实际大小不完全匹配的问题的方法，因此线条有时仍然模糊。将画布的收缩选项设置为 0 主要解决了这个问题，但是 UI 的其余部分会中断。我怀疑它是由实际上具有非整数宽度的元素引起的，该宽度不是由 clientWidth/offsetWidth 参数表示的。

【讨论】：