如何调整画布大小以适应浏览器窗口？

Question

如何调整画布大小以适应浏览器窗口？

5

你好 :) 我目前正在尝试调整画布大小，每当有人调整他们的浏览器窗口大小时。以下是我的代码：

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); 我设置了固定的宽度和高度，但实际上我想让它们能够自适应浏览器窗口。请说明如何实现！谢谢！

您可以使用以下代码来使画布自适应浏览器窗口大小： createCanvas(windowWidth, windowHeight); 这将使画布的宽度和高度与浏览器窗口的大小相匹配。

- Patrick

使用window.onresize函数，并通过使用window.innerWidth和window.innerHeight更新画布宽度。 - karthick

3个回答

2

你可以使用它。

(function() {
    // get the precentage of height and width  of the cavas based on the height and width of the window
    getPercentageOfWindow = function() {
        var viewportSize = getViewportSize();
        var canvasSize = getCanvastSize();
        return {
            x: canvasSize.width / (viewportSize.width - 10),
            y: canvasSize.height / (viewportSize.height - 10)
        };
    };
    //get the context of the canvas 
    getCanvasContext = function() {
        return $("#myCanvas")[0].getContext('2d');
    };
    // get viewport size
    getViewportSize = function() {
        return {
            height: window.innerHeight,
            width: window.innerWidth
        };
    };
    // get canvas size
    getCanvastSize = function() {
        var ctx = getCanvasContext();
        return {
            height: ctx.canvas.height,
            width: ctx.canvas.width
        };
    };
    // update canvas size
    updateSizes = function() {
        var viewportSize = getViewportSize();
        var ctx = getCanvasContext();
        ctx.canvas.height = viewportSize.height * percentage.y;
        ctx.canvas.width = viewportSize.width * percentage.x;
    };
    var percentage = getPercentageOfWindow();
    $(window).on('resize', function() {
        updateSizes();
    });
}());

canvas {
    border: 1px dotted black;
    background: blue;
}

<canvas id="myCanvas" width="300" height="300" >

这里有一个可用的链接。

- orbit

这是很多代码，可以使用以下代码（而且不需要jQuery）实现相同的功能：

(function() {
    const can = myCanvas;
    const scale = {
        x: can.width / (innerWidth - 10),
        y: can.height / (innerHeight - 10)
    };
    addEventListener('resize',() => {
        can.width = innerWidth * scale.x;
        can.height = innerHeight * scale.y;
    });
}());

- Blindman67

0

你只需要一个窗口调整大小的处理程序。

function setup() {
  var canvas = createCanvas(1500, 600);
  window.onresize = function() {
    canvas.height = window.outerHeight;
    canvas.width = window.outerWidth;
  }
}

请确保createCanvas返回对您的画布的引用。如果您在代码中找不到元素的引用，也可以在DOM中搜索它。

window.onresize = function() {
  var canvas = document.querySelector("canvas");
  canvas.height = window.outerHeight;
  canvas.width = window.outerWidth;
}

- Will Reese

不幸的是，这对画布没有影响，它仍然保持固定的宽度和高度，在移动窗口时不会改变。有任何想法为什么？ - Patrick

你的 createCanvas 函数是否返回画布元素的引用？ - Will Reese

我对JavaScript很新，请问这是什么意思？我不知道这是否有帮助，但整个代码中只有createCanvas被写在那里。 - Patrick

在某个地方应该有像 function createCanvas() 这样的代码片段。它的末尾应该写上 return canvas 或者类似的东西。 - Will Reese

不好意思，我没看到。如果可以的话，明天我会给你发消息，因为我现在得走了。谢谢。 - Patrick

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ɢʀᴜɴᴛ · Accepted Answer

您好 :) 根据您的问题，看起来您正在使用p5.js库，它具有名为(event)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>