div 拉伸包含画布

Question

嗨，我正在尝试这样做：

<div>
<canvas height="300px" width="200px"></canvas>
</div>

我创建了 javascript 来渲染画布，有人可以建议如何根据画布大小拉伸 div 以及是否可以不使用 javascript 吗？我已经尝试过嵌套 div 的解决方案，但它不起作用。谢谢

Answer 1

使用不同的 display 对于包含 div 那么事情应该可以进行（另请参阅 这个jsfiddle):

<div>
    <canvas height="300px" width="200px"></canvas>
</div>

CSS：

div {
    border: 2px solid blue; /* demo purposes */
    display: inline-block;
    line-height: 0;
}
canvas {
    background-color: khaki; /* demo purposes */
}

附言。这 line-height: 0 是为了确保没有出现 空间被渲染 在画布下方。也可以看看 这个问题.

Answer 2

如果您可以确定CANVAS大小更改，则会根据CANVAS的更改尺寸，动态地启动将动态设置DIV的尺寸的事件。