浏览器窗口大小改变时重新绘制问题

[JewMike]

浏览器大小发生改变的时候画布宽度会跟随动态变宽变窄，高度也会变 但是比例不是1:1变高或者变窄

[941477276]

我是根据画布所在的容器宽高来进行重绘的，如果画布所在容器高度固定死了就会出现你所说的问题

[JewMike]

抱歉，我不是专业的前端。请问一下我设置的容器高度为height: calc(100% - 100px);然后我在不设置容器高度或者按比例设置的时候出现的我说的问题。想请教下有什么解决办法么

[941477276]

可以给个例子吗？

[JewMike]

html

    <div class="esign">
        <div class="tips">提示：请在以下区域使用正楷体字签名</div>
        <div class="container" id="container"></div>

        <ul class="btns">
            <li>
                <button id="save" type="button" class="layui-btn">保存</button>
            </li>
            <li>
                <button id="clear" type="button" class="layui-btn layui-btn-primary">清空</button>
            </li>
        </ul>
    </div>

css

body, canvas {
    padding: 0;
    margin: 0;
}

.-canvas-wrapper > canvas{
    cursor: crosshair;
    border: 2px dashed #ccc;
    height: 100%;
    width: 100%;
}

.esign{
    position: absolute;
    top: 50px;
    bottom: 50px;
    right: 50px;
    left: 50px;
}
.esign .container {
    height: calc(100% - 100px);
}

.esign .btns ,
.esign .tips {
    transform: rotate(90deg);
}

.esign .tips {
    position: absolute;
    top: 110px;
    right: -143px;
}

.esign .btns {
    position: absolute;
    bottom: 0;
    right: 10px;
}
.esign .btns li{
    margin-bottom: 10px;
}

[941477276]

“浏览器大小发生改变的时候画布宽度会跟随动态变宽变窄，高度也会变”这个问题解决了，“1:1变高或者变窄”这个功能暂时未实现