首页 > 编程语言> > javascript-尝试使用p5.js获取响应式窗口和形状

javascript-尝试使用p5.js获取响应式窗口和形状

2019-11-10 21:34:37 作者：互联网

我正在通过JS教程(使用p5.js)进行操作,并且感兴趣的是编写具有4个形状的响应式屏幕,这些屏幕在缩小时彼此紧贴并相互贴合

为y定义一个单独的变量是否足够,还是最好用一组新的x和y变量重新定义所有形状？窗口高度/宽度似乎应该是使用的正确代码

我的代码：

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

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

解决方法:

您需要做两件事：

首先,您需要检测何时调整屏幕大小,并在发生这种情况时调整画布大小. windowResize()和resizeCanvas()函数可派上用场.有关更多信息,请参见the reference.

其次,您只需要使用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);
}

标签：p5-js,javascript
来源： https://codeday.me/bug/20191110/2015207.html