关于在p5.js WEBGL模式下带有笔触的自定义形状(使用beginShape函数):在WEBGL模式下,lineJoint()和lineCap()函数不可用。这就是形状中的线不能无缝连接的原因。我尝试使用自定义形状的轮廓来解决此问题,但是在WEBGL模式下也无法实现。
还有其他方法可以使这些行合并吗?
非常感谢!
Codepen出现问题:https://codepen.io/sebastianwinter/pen/eYNNEEx?editors=1010
不工作轮廓
function setup() {
createCanvas(window.innerWidth, window.innerHeight, WEBGL);
}
function draw() {
let strokeSize = 20;
background(2,8,51);
smooth();
noFill();
strokeWeight(strokeSize);
stroke(255,255,255);
polygon(0, 0, 200, 7);
}
function polygon(x, y, radius, npoints) {
let angle = TWO_PI / npoints;
beginShape();
for (let a = 0; a < TWO_PI; a += angle) {
let sx = x + cos(a) * radius;
let sy = y + sin(a) * radius;
vertex(sx, sy);
}
/* not working:
beginContour();
for (let a = 0; a < TWO_PI; a += angle) {
let sx = x + cos(a) * (radius - strokeSize);
let sy = y + sin(a) * (radius - strokeSize);
vertex(sx, sy);
}
endContour();*/
endShape(CLOSE);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
AFAIK p5.js的WEBGL
模式仍处于实验阶段,您在2D模式下习惯的某些功能仍为in the works。
此刻,我可以建议一个变通的解决方法:使用内部形状,类似于beginContour():
function setup() {
createCanvas(window.innerWidth, window.innerHeight, WEBGL);
}
function draw() {
let strokeSize = 20;
background(2,8,51);
smooth();
fill(255);
//strokeJoin(BEVEL);
//strokeWeight(1);
stroke(255,255,255);
polygon(0, 0, 200, 7, 0.85);
}
function polygon(x, y, radius, npoints, thicknessRatio) {
let angle = TWO_PI / npoints;
beginShape();
//CW
for (let a = 0; a <= TWO_PI; a += angle) {
let sx = x + cos(a) * radius;
let sy = y + sin(a) * radius;
vertex(sx, sy);
}
// beginContour();
// CCW
for (let a = TWO_PI; a >= 0; a -= angle) {
let sx = x + cos(a) * radius * thicknessRatio;
let sy = y + sin(a) * radius * thicknessRatio;
vertex(sx, sy);
}
// endContour();
endShape(CLOSE);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js"></script>