有没有办法在 bootstrap Div 元素中调整 p5js canvas 的大小？

Question

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

这是我的 bootstrap div 网格，其中包含 div 元素，我希望 canvas 位于

<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 元素

的父级 canvas

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);
}

当我在浏览器中运行我的脚本时，你可以在这个 image 中看到虽然 canvas 似乎被适当缩放，但它与第二个的尺寸不同和网格中的第三个元素。

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

Answer 1

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

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);
}

这里有几张图片，您可以在 normal window and a scaled window 上看到结果。

有没有办法在 bootstrap Div 元素中调整 p5js canvas 的大小？

Is there a way to resize a p5js canvas in a bootstrap Div element?

html

javascript

jquery

canvas

p5.js