Question

我在here有一个网页，我希望在HTML5画布中调整webGL绘图的大小以使用bootstrap.js库进行布局，以适合“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的宽度。

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

1 个答案: