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

Question

我在 here where I want to resize a webGL drawing in an HTML5 canvas to fit within "6" columns using the bootstrap.js 库中有一个网页用于布局。

布局定义为：

<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 库时，如何取回 "columns" 的宽度？ 2) 我需要同时设置 gl.canvas.width 和 "lesson04-canvas" 的宽度吗？ 3) tick() 函数是最合适的地方吗？

Answer 1

只需将以下内容添加到您的css：

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

然后它应该适合 col-md-6 的宽度 div。

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

How do I resize webGL canvas in bootstrap.js column?

html

javascript

canvas

webgl

twitter-bootstrap