如何更改 HTML5 画布画板的高度？答案

【问题标题】：How to change the height of the HTML5 canvas sketchpad?如何更改 HTML5 画布画板的高度？
【发布时间】：2019-12-11 17:36:05
【问题描述】：

我使用响应式画板 - demo 和 Github。我唯一改变的是添加背景图片，所以我添加了这个 CSS：

.canvas {
    background-color: transparent;
    background-size: cover;
    background-image: url(example.jpg);
}

但我的问题是身高。设置该画布框高度并保持背景图像响应的正确方法是什么？比如demo中画布框（带背景图）的高度如何与右框（带按钮）的高度对齐？

【问题讨论】：

【解决方案1】：

在 css 中添加一个元素，它会很好地工作：

.canvas {
background-color: transparent;
background-size: cover;
background-image: url(example.jpg);
height : 100% / 100vh;

}

制作高度分量

【讨论】：