規模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的寬度和高度

回答

相關問題