Pat*_*ick 4 javascript canvas html5-canvas
您好 :) 我目前正在尝试在有人调整浏览器窗口大小时调整我的画布大小。到目前为止，这是我的代码：
html：
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="libraries/p5.js">
</script>
<script language="javascript" src="libraries/p5.dom.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js">
</script>
<script language="javascript" type="text/javascript" src="blob.js">
</script>
<title>USGame</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px;
border: 0;
overflow: hidden; /* Disable scrollbars */
display: block; /* No floating content on sides */
}
</style>
</head>
<body>
</body>
</html>
这是我的 js 文件：
var blob;
var blobs = [];
var zoom = 1;
function setup() {
createCanvas(1500, 600);
blob = new Blob(0, 0, 64);
for (var i = 0; i <100; i++) {
var x = random(-width,width);
var y = random(-height,height);
blobs[i] = new Blob(x, y, 8);
}
}
function draw() {
background(3, 3, 40);
translate(width/2, height/2);
var newzoom = 64 / blob.r;
zoom = lerp(zoom, newzoom, 0.1);
scale(zoom);
translate(-blob.pos.x, -blob.pos.y);
for (var i = blobs.length-1; i >=0; i--) {
blobs[i].show();
if (blob.eats(blobs[i])) {
blobs.splice(i, 1);
}
}
blob.show();
blob.update();
}
它说：
createCanvas(1500, 600);
我正在设置固定的宽度和高度，当我真的想要调整它们以适合某人的浏览器窗口时。请解释我如何做到这一点！谢谢！
嗨:) 从你的问题看来，你正在使用 p5.js 库，它有一个内置函数（事件）称为windowResized()，您可以使用它。每次调整浏览器窗口大小时都会触发此函数。
一旦它被触发，你可以使用另一个名为的内置函数 resizeCanvas(), 的来调整画布大小，使其与浏览器窗口的宽度和高度相匹配。
这是一个快速示例，展示了如何使用这些功能......
function setup() {
createCanvas(windowWidth, windowHeight);
}
function draw() {
background('#222');
ellipse(windowWidth / 2, windowHeight / 2, 100, 100);
fill('#07C');
noStroke();
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}body{margin:0;overflow:hidden}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.min.js"></script>