规模HTML5画布div的宽度和高度

在我的应用我有DIV与Twitter的引导这样的风格：规模HTML5画布div的宽度和高度

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

画布是一些大型images.i的占位符需要一个方式来扩展图像宽度和这个div的高度，或者如果不完全缩放到div的宽度和高度，scale必须为div创建一个非常小的滚动条。该div有overflow:scroll风格。

来源

2014-12-24 MBehtemam

当你使用引导程序，你可以用jQuery做到这一点：

var $canvas = $("#canvas"); 
var $parent = $canvas.parent(); 
$canvas.width($parent.width()); 
$canvas.height($parent.height());

来源

2014-12-24 17:30:14 nquocnghia

请务必按比例调整宽度和高度（保持原始高宽比），否则画布内容会变形（拉伸）。 – markE

使用JavaScript获取div的宽度和高度，然后使用这些值设置画布高度和宽度。

例如：

var canvas = document.getElementsByTagName('canvas')[0]; 
var divHeight = document.getElementById('yourDiv').clientHeight; 
var divWidth = document.getElementById('yourDiv').clientWidth; 

canvas.height = divHeight; 
canvas.width = divWidth;

当div高度/宽度扩展它调用上面的代码中你可以将它添加到一个resize事件处理程序，以便。

来源

2014-12-24 17:25:13

当我使用这种方式，我无法在画布上看到我的图像。 – MBehtemam

如果您想非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的高度。

来源

2014-12-24 17:39:31

规模HTML5画布div的宽度和高度

回答

相关问题