如何在p5.js中动态调整图纸的高度和宽度？

Question

我有一个取决于windowWidth的矩形。我希望矩形及其内部图形根据windowWidth动态调整其大小。

这是我的部分代码，用于绘图。

//Hardcoded date and time
var date = '15/05/17';
var time = '23:05';
var totaltime = '5h 45m';
var completeddate = '18/05/17';
var timeoflast = '4:50';
var canvas;
var canvasheight = 200;
var yellowrectanglewidth = 100;
var yellowrectangleheight = 59;

function setup() {


canvasheight = windowHeight / 3.7;
canvas =  createCanvas(windowWidth,canvasheight);
//canvas.style('display', 'block');
canvas.parent('sketch-holder');

//Image
leftend = loadImage("leftend.png");
rightend = loadImage("rightend.png");

yellowrectanglewidth = windowWidth - 160;

}

function draw() {


//Main Rectangle
fill(67, 67, 73);
rect(0, 0, windowWidth, canvasheight);

//Firstyellowrect
fill(215, 198, 170);
rect(90, canvasheight /9, yellowrectanglewidth, yellowrectangleheight);
//Secondyellowrect
rect(90, canvasheight /2.2, yellowrectanglewidth, yellowrectangleheight);

//Left End
//Text date
textSize(15);
fill(215, 198, 170);
text(date, 10, canvasheight/6);
//Text Time

fill(215, 198, 170);
text(time, 20, canvasheight/3 - 10);

//Image
image(leftend, 20,canvasheight/3 , 70, 40);


//Text Time
textSize(25);
fill(215, 198, 170);
text(totaltime, 5,canvasheight / 3 + 70);

//Right End
textSize(15);
fill(215, 198, 170);
text(completeddate, windowWidth - 60, canvasheight/6);

fill(215, 198, 170);
text(timeoflast, windowWidth - 40, canvasheight/3 - 10);

//Image 2
image(rightend, windowWidth - 70,canvasheight/3, 70, 40);

}

正如你在这里看到的，我试图让我的大多数绘图都依赖于windowWidth。因为我希望我的绘图的大小根据WindowWidth增加和减少。

有没有更简单的方法来做这一切？

Answer 1

我不完全确定你在问什么：有没有更简单的方法来做具体的事情？

但是你一般看起来没问题。您通常使用width和height变量绘制一个随画布大小缩放的场景。这几乎就是你已经在做的事情，所以我认为你的代码很好。

无耻的自我推销：here是使用width和height变量的教程。它适用于Processing，但所有相同的想法都适用于P5.js。

如果您有更具体的问题，请在新问题中发布MCVE（只需要一个椭圆或矩形），我们将从那里开始。祝你好运。