Question

你好:)我正在尝试在有人调整浏览器窗口大小时调整画布大小。到目前为止，这是我的代码：

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); 我正在设置固定宽度和高度，当我真的希望这些调整到适合某人的浏览器窗口时。请解释我怎么做到这一点！谢谢！

Answer 1

你可以使用它。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

这是可行的link。

Answer 2

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

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

Answer 3

嗨:)从您的问题看来，您使用的是p5.js库，它有一个内置函数（事件），名为 windowResized() ，你可以使用。此功能将在浏览器窗口的每个调整大小时触发。

一旦触发，您可以使用另一个名为 resizeCanvas() 的内置函数来调整画布大小，使其与浏览器窗口的宽度和高度相匹配。

这是一个快速example，展示了如何使用这些功能......

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>

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

3 个答案: