如何在 bootstrap.js 列中调整 webGL 画布的大小？

Question

我在here 有一个网页，我想在其中使用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 的宽度。