javascript - 有没有办法在引导 Div 元素中调整 p5js 画布的大小？

Question

我正在尝试在引导网格中创建一个 p5js 画布。网格的每个 div 元素都应该有自己的 p5js 画布。我还希望这个画布在浏览器缩放时调整大小。

这是我的引导 div 网格，其中包含我希望画布所在的 div 元素

<div class="container">
  <div class="row">
    <div class="col-sm-4" id="col_1">
      <script src="my_script.js"></script>
    </div>
    <div class="col-sm-4" style="background-color: #00FFFF;">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4" style="background-color:  #ffff00;">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

这是我的脚本，我在其中创建以 div 元素为父级的画布

var canvasDiv = document.getElementById('col_1');
var width = canvasDiv.offsetWidth;
var height = canvasDiv.offsetHeight;
function setup() {
let render = createCanvas(width, height);
render.parent('col_1');
}

function draw() {
background(0, 100, 200);
fill(255, 0, 0);
ellipse(width/2, height/2, 40, 40);
}

function windowResized() {
resizeCanvas(width, height);
}

当我在浏览器中运行我的脚本时，您可以在此图像中看到，虽然画布似乎已正确缩放，但它与网格中的第二个和第三个元素的尺寸不同。

此外，当我尝试调整浏览器的大小时，画布不会调整大小，而它的位置似乎会根据引导网格发生变化，如您在此处所见。

标签： javascripthtmljquerycanvasp5.js

Answer 1

感谢@statox 的评论，它帮助我找出了问题所在。我对脚本进行了一些更改，一切似乎都很好。我需要给画布一个固定的高度，并对边距进行小幅调整，以保持所有东西的形状。当然还有改进的余地，但目前我对结果感到满意。这是代码：

var canvasDiv = document.getElementById('col_1');

function setup() {
var width = canvasDiv.offsetWidth;
var height = canvasDiv.offsetHeight;
let render = createCanvas(width, 200);
render.parent("col_1");
render.style('margin-left', '-15px');
}

function draw() {
background(0, 100, 200);
fill(255, 0, 0);
ellipse(width/2, height/2, 40, 40);
}

function windowResized() {
var width = canvasDiv.offsetWidth;
var height = canvasDiv.offsetHeight;
resizeCanvas(width, 200);
}

这里有几张图片，您可以在普通窗口和缩放窗口上看到结果。