Javascript 如何绘制始终位于画布内的几何图形？

我想使用p5.js创建几何图形

以下是我迄今为止所尝试的：

函数设置（）{
createCanvas（窗口宽度、窗口高度）；
}
函数绘图（）{
背景（220）；
填充（255,0,0）；
仰泳（）；
beginShape（）；
设a=random（-100100）；
顶点（30，a）；
顶点（100100）；
顶点（-30800）；
顶点（300300）；
端形（闭合）；
}

*{
保证金：0；
填充：0；
}

---

我在底部写了一个答案，但在此之前我将给出一些提示：

画布的宽度和高度有内置变量，分别命名为

width

和

height

画布上的所有像素都具有正坐标。因此，对于形状的任何顶点，如果任一坐标为负，它都将离开屏幕

setup（）

块在开始时执行一次，

draw（）

块在每一帧执行一次。由于

random（）

我建议学习数组和循环：

如果您希望形状不跨越自身，则这要复杂得多。这是可行的，所以继续评论这个答案，或者编辑你的问题，如果这是你想要的

我想这可能会满足你的要求：

let vertices = [];

function setup() {
  createCanvas(windowWidth, windowHeight);
  let numberOfVertices = random(3, 11); //pick the number of points
  for (let i = 0; i < numberOfVertices; i++) {
    vertices.push(createVector(random(width), random(height))); //add a point to the list of points
  }
}

function draw() {
  background(220);
  fill(255, 0, 0);
  noStroke();
  beginShape();
  for (let i = 0; i < vertices.length; i++) {
    vertex(vertices[i].x, vertices[i].y);//place each vertex
  }
  endShape();
}

让顶点=[]；
函数设置（）{
createCanvas（窗口宽度、窗口高度）；
设numberOfVertices=random（3,11）；//选取点数
for（设i=0；i
如果一切都正确完成，你能画出你的规格吗？嘿！非常感谢你！是的，避开十字路口会很好。我为此写了这篇文章：–如果你能再次帮助我，我将非常感激！有人比我快了大约一个小时，但他们几乎完全按照我的想法做了（他们的答案可能更好）