将 HTML5 Canvas 缩放到 div 宽度和高度

Question

在我的应用程序中，我有使用 twitter bootstrap 设计的 div，如下所示：

<div class="col-md-12">
    <canvas id="canvas"></canvas>
</div>

画布是一些大图像的占位符。我需要一种方法将图像缩放到该 div 的宽度和高度，或者如果不完全缩放到 div 的宽度和高度，则缩放必须为 div 创建一个非常小的滚动条。div 有overflow:scroll风格。

Answer 1

如果您想要非 javascript 答案，可以在 CSS 中实现：

.col-md-12{
  position:relative; //make sure this is part of your col-md style
}

#canvas{
  position:absolute;
  width:100%;
  height:100%;
  top:0px;
}

我假设有样式在其他地方设置 .col-md-12 div 的高度。