如何在bootstrap.js列中調整webGL canvas的大小？

Question

我在這里有一個網頁，我想使用bootstrap.js庫進行布局，以在HTML5畫布中調整webGL繪圖的大小以適合“ 6”列。

布局定義為：

<div class="container">
    <div class = "row">
        <div class = "col-md-2"></div>
        <div class = "col-md-6" id="rightColDiv"><canvas id="lesson04-canvas" style="border: none;" width="1000" height="500"></canvas></div>
        <div class = "col-md-2"></div>
        <div class = "col-md-2"></div>
    </div>
</div>

我已經在tick（）函數中嘗試了以下操作，但仍然沒有獲得所需的大小。

function tick() {
    requestAnimFrame(tick);
    drawScene();

   //    gl.canvas.width = window.innerWidth;
   //    gl.canvas.height = window.innerHeight;

   // This is not returning a width
   var rightColDiv = document.getElementById("rightColDiv");
   var glwidth = rightColDiv.width;
//   gl.canvas.width = window.innerWidth - rightColDiv.width;
    gl.canvas.width = window.innerWidth * 6/12; // 6 columns out of the 12
    document.getElementById("lesson04-canvas").width = window.innerWidth * 6/12;
  // gl.canvas.height = window.innerHeight;

}

我認為問題是：

1）當我使用boostrap.js庫時，如何獲取“列”的寬度？ 2）我是否需要同時設置gl.canvas.width和“ lesson04-canvas”的寬度？ 3）tick（）函數最適合這樣做嗎？

Answer 1

只需將以下內容添加到您的CSS中：

#rightColDiv canvas { 
  max-width:100%; 
}

然后，它應該適合col-md-6 div的寬度。