到目前为止，我已经得到了 p5.js 画布大小，可以使用以下命令对其父 div 容器大小做出反应document.getElementById("divName").offsetWidth and .offsetHeight但我还没有弄清楚为什么它不分享自己的立场。这是我的应用程序的简化版本。
p5.js:
var sketchWidth;
var sketchHeight;
function setup() {
sketchWidth = document.getElementById("square").offsetWidth;
sketchHeight = document.getElementById("square").offsetHeight;
createCanvas(sketchWidth, sketchHeight);
}
function draw() {
background(0,0,255);
}
function windowResized() {
sketchWidth = document.getElementById("square").offsetWidth;
sketchHeight = document.getElementById("square").offsetHeight;
resizeCanvas(sketchWidth, sketchHeight);
}
HTML:
<html>
<body>
<div id="squareContainer">
<div id="square">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<script src="square.js"></script>
</div>
</div>
</body>
<style>
body {
background-color: black;
}
#squareContainer {
display: flex;
width: 50%;
height: 50%;
margin: 0 auto;
background-color: white;
}
#square {
box-sizing: border-box;
width: 80%;
height: 80%;
margin: auto;
background-color: red;
}
</style>
</html>
这是一个截屏 https://i.stack.imgur.com/UYSts.png我当前正在渲染的内容。正如您所看到的，蓝色方块（我的 p5.js 代码）与红色方块（div）具有相同的尺寸，但我希望它也重叠在同一位置。
请参阅文档createCanvas https://p5js.org/reference/#/p5/createCanvas a p5.Renderer https://p5js.org/reference/#/p5.Renderer。将容器设置为渲染parent() https://p5js.org/reference/#/p5.Element/parent:
let renderer = createCanvas(sketchWidth, sketchHeight);
renderer.parent("square");
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
