在p5.js中，如何使drawingContext只影响一个形状?

Question

drawingContext.shadowBlur = 50;
drawingContext.shadowColor = color("#F8B988")
noStroke()
fill("#f4d402");
circle(width/2, height*0.60, 100);
fill("black")
rect(0, height*.60, 0, width)

如何使drawingContext只影响圆圈而不影响矩形?

我试着把rect在一个不同的函数，但它仍然没有修复。(

Answer 1

使用push()和pop()。引用文件:

push()函数保存当前的绘图样式设置和转换，而pop()恢复这些设置。注意这些函数总是一起使用的。他们允许你改变风格转换设置，然后返回到原来的设置

function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
push(); 
drawingContext.shadowBlur = 50;
drawingContext.shadowColor = color("#F8B988");
noStroke();
fill("#f4d402");
circle(width / 2, height * 0.6, 100);
pop(); 
fill("black");
rect(0, height * 0.6, width, height);
}

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