时间戳

首页 > 解决方案 > 如何在 ProcessingJS 中绘制星形

processing - 如何在 ProcessingJS 中绘制星形

问题描述

这是我当前的项目代码：

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 维度内）

标签： processingprocessing.js

解决方案

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);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

推荐阅读