本节主要讲解图形的相互覆盖和图形的透明度配置

1.写入基础代码

配置窗体大小为宽400，高400的正方形

void setup(){
  size(400,400);//设置窗体为宽400，高400的正方形
}
void draw(){
 
}

2.设设置窗体背景色为白色

void draw(){
 background(255,255,255);//设置背景色为白色
}

3.在X=100,Y=100的坐标绘制一个绿色的正方形

4.在X=120,Y=120的位置绘制一个边长为60的红色矩形

我们会发现，红色矩形部分覆盖了绿色矩形

void draw(){
 background(255,255,255);//设置背景色为白色
 fill(0,255,0);//设置填充色为绿色
 rect(100,100,60,60);//在X=100,Y=100的位置绘制一个边长为60的绿色矩形
 
 fill(255,0,0);//设置填充色为红色
 rect(120,120,60,60);//在X=120,Y=120的位置绘制一个边长为60的红色矩形
}

4.清除边框。

我们可以看到，绿色矩形和红色的矩形有一条黑色的边框。可以通过noStroke()函数来清除所有的边框。请注意S是大写

void draw(){
 background(255,255,255);//设置背景色为白色
 fill(0,255,0);//设置填充色为绿色
 rect(100,100,60,60);//在X=100,Y=100的位置绘制一个边长为60的绿色矩形
 
 fill(255,0,0);//设置填充色为红色
 rect(120,120,60,60);//在X=120,Y=120的位置绘制一个边长为60的红色矩形
   noStroke();//清除所有轮廓注意S是大写
}

5.图形透明度配置

    现在界面上红色把绿色覆盖了，我们有时候需要看到红色下面的绿色。这时候，我们可以配置红色的透明度，让其显示底部的内容。

    在fill中，添加第四个参数，即可配置透明度，透明度的取值范围为【0-255】之间，值越小，透明度越高

void draw(){
 background(255,255,255);//设置背景色为白色
 fill(0,255,0);//设置填充色为绿色
 rect(100,100,60,60);//在X=100,Y=100的位置绘制一个边长为60的绿色矩形
 
 fill(255,0,0,100);//设置填充色为红色,并且配置透明度为100，透明度的取值范围是【0-255】之间
 rect(120,120,60,60);//在X=120,Y=120的位置绘制一个边长为60的红色矩形
   noStroke();//清除所有轮廓注意S是大写
}

6.清空界面，并且绘制新的图形

    有时候，我们需要清除掉旧的内容，替换上新的内容，这时候我们可以使用background即可

void draw(){
 background(255,255,255);//设置背景色为白色
 fill(0,255,0);//设置填充色为绿色
 rect(100,100,60,60);//在X=100,Y=100的位置绘制一个边长为60的绿色矩形
 
 fill(255,0,0,100);//设置填充色为红色,并且配置透明度为100，透明度的取值范围是[0-255]之间
 rect(120,120,60,60);//在X=120,Y=120的位置绘制一个边长为60的红色矩形
   noStroke();//清除所有轮廓注意S是大写
  background(255,255,255);//设置背景色为白色，并且覆盖之前的所有图形
  rect(50,50,100,100);//重新在X=50,Y=50的位置绘制一个边长为100的红色透明矩形。
}

形状覆盖和透明度到此结束，下节将讲解直线的绘制

以下表格内容是本次课程使用到的函数解释 .注意noStroke()的S是大写