Processing学习记录（4）：描边属性、填充和背景色

Processing绘图默认的是浅灰色背景、黑色线条、白色的图形（如下图）。若想改变这些默认值，需要使用background()、stroke()、fill()函数。

1. 描边函数及类型表

2. 描边粗细

2.1. 函数及代码

这个属性在上一节点的绘制时介绍过，如下。

strokeWeight(x);

• 数值x表示粗细，默认为1。
• 举例如下：

void setup() {
  size(200,200);      // 设置画布大小为200*200
  strokeWeight(10);   // 设置点大小为10
  point(100,100);     // 在坐标100,100画一个点
}

• 注意：描边属性函数是全局修改，在绘图前使用才能生效。所以strokeWeight()需要放在point()函数的上一行，否则不生效。
• 必要时候要设置回原来的值，否则在后面的绘图中，描边属性将一直不变。
• 此时看，中心点的圆就很大很明显了。

2.2. 效果

2.3. 以椭圆为例

void setup() {
  size(200,200);        // 设置画布大小为200*200  
}
void draw() {
  strokeWeight(5);          // 描边值5
  ellipse(100,100,110,60);  // 中心点坐标(100,100)、宽110、高60的椭圆
}

3. 直线的端点形状

3.1. 函数及代码

strokeCap(Mode)

3.2. 三种模式

见下图

3.3. 示例及效果

}
void draw() {
  strokeWeight(10);       // 描边5
  strokeCap(ROUND);       // 圆形，大于实际直线长度
  line(30,50,170,50);     // 起点坐标(30,50)、终点坐标(170,50)的直线
  
  strokeCap(SQUARE);      // 方形，等于实际直线长度
  line(30,100,170,100);   // 起点坐标(30,100)、终点坐标(170,100)的直线

  strokeCap(PROJECT);     // 方形，大于实际直线长度
  line(30,150,170,150);   // 起点坐标(30,150)、终点坐标(170,150)的直线
}

4. 描边颜色

4.1. 函数及代码

stroke()

如果没有定义，默认色是0，黑色。

4.2. 示例及效果

void setup() {
  size(200,200);        // 设置画布大小为200*200  
}
void draw() {
  strokeWeight(5);          // 描边值5
  stroke(#3399FF);          // 蓝色描边
  ellipse(100,100,110,60);  // 中心点坐标(100,100)、宽110、高60的椭圆
}

5. 拐角形状

5.1. 函数及代码

strokeJoin(Mode)

5.2. 三种模式

5.3. 示例及效果

  size(800,600);         // 设置画布大小为800*600  
}
void draw() {
  strokeWeight(10);       // 描边10
  //strokeJoin(MITER);    // 默认尖角
  triangle(36,30,145,30,40,138);
  
  strokeJoin(BEVEL);      // 斜角
  triangle(236,30,445,30,340,138);
  
  strokeJoin(ROUND);      // 圆角
  triangle(360,300,500,300,400,380);
}

6. 平滑处理

6.1. 函数及代码

使用smooth()和noSmooth()作描边的平滑处理。
与size()类似，使用时一般在setup()中调用一次即可。

6.2. 示例及效果

void setup() {
  size(800,400);         // 设置画布大小为800*800
  background(#000000);   // 背景黑色
  noStroke();            // 不显示描边
  
  smooth();              // 平滑处理
  ellipse(400,200,600,300);  
}

void setup() {
  size(800,400);         // 设置画布大小为800*800
  background(#000000);   // 背景黑色
  noStroke();            // 不显示描边
  
  noSmooth();              // 不作平滑处理
  ellipse(400,200,600,300);  
}

• 如下两图对比，明显看出不作平滑处理的描边有锯齿。

7. 背景色函数

函数background()可以设置显示窗口的背景颜色。

参数值可设置为0~255。0表示黑色，255表示白色，二者之间是各种灰度值。如果没有定义，默认背景色是204浅灰色。

8. 填充色函数

函数fill()可以设置填充色。如果没有定义，默认填充色是255，即白色。

void setup() {
  size(200,200);        // 设置画布大小为200*200
  background(235);
}
void draw() {
  fill(204);
  ellipse(60,60,50,50);
  fill(153);
  ellipse(90,90,50,50);
  fill(72);
  ellipse(120,120,50,50);  
}