Question

我正在通过JS教程（使用p5.js）进行编程，并且有兴趣编写一个响应式屏幕，其中包含4个缩小形状并相互贴在一起的形状

为y定义一个单独的变量，或者用一组新的x和y变量重新定义所有形状会更好吗？窗口高度/宽度似乎就像它应该是正确的代码一样

我的代码：

＆＃13;

function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
} 

function draw() {
  background(200);
  noStroke();

  var labelw = window.innerWidth/8;
  var labelh = labelw/4;
  var sectionw = window.innerWidth;
  var sectionh = window.innerHeight;

  //red
  if(window.innerWidth/2<window.innerHeight){
    fill(200, 50, 50);
    rect(0, 0, sectionw/2, sectionw/4)
  }

  //blu
  if(window.innerWidth/2<window.innerHeight){
    fill(50, 50, 200);
    rect(sectionw/2, 0, sectionw/2, sectionw/4)
  }

  //grn
  if(window.innerWidth/2<window.innerHeight){
    fill(130, 230, 130);
    rect(0, sectionh/2, sectionw/2, sectionw/4)
  }
  //prp
  if(window.innerWidth/2<window.innerHeight){
    fill(190, 100, 230);
    rect(sectionw/2, sectionh/2, sectionw/2, sectionw/4)
  }

  //label1
  fill(50)
  rect (0,0,labelw,labelh)
  fill(255);
  textSize(labelw/10);
  text("Test Label\nTestIdeo, 19xx-20xx",0,0,200,200);
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>
<html>
  <head></head>
  <body></body>
</html>

＆＃13;

Answer 1

你需要做两件事：

首先，您需要检测屏幕调整大小的时间，并在发生这种情况时调整画布大小。 windowResized()和resizeCanvas()函数可以派上用场。有关详细信息，请参阅the reference。

其次，您只需使用width和height变量来绘制形状。调整画布大小时，width和height变量会自动更新。

总而言之，它看起来像这样：

function setup() {
    createCanvas(windowWidth, windowHeight);
} 

function draw() {
    fill(255, 0, 0);
    rect(0, 0, width/2, height/2);

    fill(0, 255, 0);
    rect(width/2, 0, width/2, height/2);

    fill(0, 0, 255);
    rect(0, height/2, width/2, height/2);

    fill(255, 255, 0);
    rect(width/2, height/2, width/2, height/2);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

试图获得响应窗口＆amp;使用p5.js的形状

1 个答案: