问题
js beginner and trying to make program which is change the shape of eyebrow.
I just finished to make shape by mousePressed event but I want to know how to draws lines inside the shape that I made!
Like the photo below, I made the shape of eyebrow by using p5.js functions (beginShape(), endShape(CLOSE)) but is it possible to draw lines inside the shape??
Any help appreciate!!
<html>
<head>
<meta charset="UTF-8">
<script src="p5/p5/p5.min.js"></script>
<script src="sketch7.js"></script>
</head>
<body>
</body>
</html>
var brows=[];
var browsFirst=[];
var flag=0;
function Brow(x,y){
this.x=x;
this.y=y;
this.clicked=function(){
vertex(this.x,this.y);
noFill();
ellipse(this.x, this.y, 8,8);
}
}
function preload(){
img=loadImage("faceSample.jpg");
}
function setup(){
createCanvas(970,1334);
image(img,0,0);
}
function fillColor(){
fill(54,50,49,80);
}
function mousePressed(){
brows.push(new Brow(mouseX,mouseY));
if(brows.length==1){
beginShape();
brows[brows.length-1].clicked();
}
var d=dist(brows[0].x, brows[0].y, mouseX, mouseY);
if(d>4){
brows[brows.length-1].clicked();
}else{
flag=flag+1;
fillColor();
endShape(CLOSE);
if(flag==2){
print("Completed to make polygon");
for(var i=0; i<brows.length; i++){
browsFirst[i]=brows[i];
}
brows=[];
flag=0;
}
}
if(brows.length>1){
line(brows[brows.length-1].x,brows[brows.length-1].y,brows[brows.length-2].x,brows[brows.length-2].y);
}
}
来源：https://stackoverflow.com/questions/43703502/draw-lines-inside-the-shape-in-p5-js