如何在 ProcessingJS 中绘制星形答案

【问题标题】：How to draw a star shape in ProcessingJS如何在 ProcessingJS 中绘制星形
【发布时间】：2018-12-16 05:07:55
【问题描述】：

这是我当前的项目代码：

size(500,500);
background(255, 255, 255);

fill(250,0,0);
ellipse(150, 230, 100, 200);            
fill(10,0,0);
ellipse(180, 233, 30, 30);
fill(10,0,0);
ellipse(120, 233, 30, 30);
fill(250,250,250);
ellipse(120,233,10,20);
fill(250,250,250);
ellipse(180,233,10,20);

arc(150, 280, 60, 90, 0, PI/1);

fill(250,0,0);
rect(100,330,100,100);
fill(10,10,10);
rect(50,330,50,50);
fill(10,10,10);
rect(200,330,50,50);
fill(250,0,0);
rect(90,430,50,100);
fill(250,0,0);
rect(160,430,50,100);

fill(10,0,0);
triangle(60, 300, 101, 10, 50, 450);

有人可以提供有关如何在死侍角色旁边绘制基本 5 角星的代码吗？（在大小为 500,500 的维度内）

【问题讨论】：

请注意，Processing.js 已于 2 周前（由我）存档，不再是一个活动项目。对于新代码，我建议改用 p5js。

标签： processing processing.js

【解决方案1】：

请参阅PShapes 的处理文档，其中自定义 PShapes 部分中有一个非常简单的星形实现。

参见p5.js 示例，该示例非常相似。
该代码也可以在processing.js 中使用。您必须将createCanvas(500,500) 分别更改为size(500,500) 和push()，将pop() 分别更改为pushMatrix() popMatrix()：

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

function draw() {
    background(255, 255, 255);

    // star
    push();
    translate(280, 290); // center of the star
    fill(102);
    beginShape();
    vertex(0, -50);
    vertex(14, -20);
    vertex(47, -15);
    vertex(23, 7);
    vertex(29, 40);
    vertex(0, 25);
    vertex(-29, 40);
    vertex(-23, 7);
    vertex(-47, -15);
    vertex(-14, -20);
    endShape(CLOSE);
    translate(100, 100);
    pop();

    // character
    fill(250,0,0);
    ellipse(150, 230, 100, 200);  
    fill(10,0,0);
    ellipse(180, 233, 30, 30);
    fill(10,0,0);
    ellipse(120, 233, 30, 30);
    fill(250,250,250);
    ellipse(120,233,10,20);
    fill(250,250,250);
    ellipse(180,233,10,20);
    arc(150, 280, 60, 90, 0, PI/1);
    fill(250,0,0);
    rect(100,330,100,100);
    fill(10,10,10);
    rect(50,330,50,50);
    fill(10,10,10);
    rect(200,330,50,50);
    fill(250,0,0);
    rect(90,430,50,100);
    fill(250,0,0);
    rect(160,430,50,100);
    fill(10,0,0);
    triangle(60, 300, 101, 10, 50, 450);
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"&gt;&lt;/script&gt;

【讨论】：