如何在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的宽度。