Question

有没有办法在 p5.js 中填充由绘制的线条组成的形状？我几乎没有编码经验，因此将不胜感激。我已经看到 fill() 函数被用来做类似的事情，但在这种情况下它不起作用，我怀疑这是因为它仍然只是一系列行。谢谢:)

function arm() {
   smooth();
   strokeWeight(2);
   stroke(0);
   fill(0);
   line(200, 0, 193, 60);
   line(193, 60, 130, 110);
   line(130, 110, 150, 290);
   line(150, 290, 120, 292);
   line(120, 292, 95, 440);
   line(95, 440, 125, 435);
   line(125, 435, 160, 350);
   line(160, 350, 220, 365);
   line(220, 365, 200, 500);
   line(200, 500, 235, 492);
   line(235, 492, 260, 415);
   line(260, 415, 270, 484);
   line(270, 484, 300, 479);
   line(300, 479, 315, 405);
   line(315, 405, 320, 474);
   line(320, 474, 345, 471);
   line(345, 471, 355, 420);
   line(355, 420, 420, 385);
   line(420, 385, 400, 315);
   line(400, 315, 270, 290);
   line(270, 290, 285, 190);
   line(285, 190, 360, 160);
   line(360, 160, 390, 0);
   line(390, 0, 200, 0);

Answer 1

线条不是使用 vertex，而是用于制作自定义形状。

function setup() {
  createCanvas(500, 500);
  arm();
}

function arm() {
  smooth();
  strokeWeight(2);
  stroke(0);
  fill(255, 0, 0);
  
  beginShape();
  vertex(200, 0);
  vertex(193, 60);
  vertex(130, 110);
  vertex(150, 290);
  vertex(120, 292);
  vertex(95, 440);
  vertex(125, 435);
  vertex(160, 350);
  vertex(220, 365);
  vertex(200, 500);
  vertex(235, 492);
  vertex(260, 415);
  vertex(270, 484);
  vertex(300, 479);
  vertex(315, 405);
  vertex(320, 474);
  vertex(345, 471);
  vertex(355, 420);
  vertex(420, 385);
  vertex(400, 315);
  vertex(270, 290);
  vertex(285, 190);
  vertex(360, 160);
  vertex(390, 0);
  endShape(CLOSE);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js"></script>

如何在 p5.js 中填充由线条组成的形状？

1 个答案: