形状属性和绘图顺序内容

一、形状属性

       最常用、最基础的形状属性是描边粗细(strokeWeight)样式，描端点(caps)样式以及线段间转角样式。

例1：设置描边粗细

       默认的描边粗细是1像素，但它可以用strokeWeight()函数来更改。strokeWeight()函数只有一个参数，用来设置绘制线条的宽度。

       先写代码如图1

                                         图1

        保存并运行如图2

                     图2

例2：设置描边端点样式

       strokeCap()函数用于设置线段端点的绘制样式，默认情况下，端点是圆角的。PROJECT是扩展式的线段点，SQUARE是矩形的线端点，ROUND是圆角的线端点。

       先写代码如图3

                                         图3

         保存并运行如图4

                                         图4

例3：设置线段之间的转折关系

         strokeJoin()函数改变线与线之间的连接样式（转角样式），默认情况下是尖角（斜接，mitered）的。BEVEL是斜切的转角，ROUND是圆形的转角，MITER是斜接的转角。当任意被设置之后，在此后所有的绘制形状上都会生效。

         先写代码如图5

                                      图5

           保存并运行如图6

                                        图6

         注意：图5中虽然只设置了一个strokeWeight()函数，但是我们可以看到图6中四个图形线条宽度都是一样的，另外rect()函数里第一个参数是设置x的位置，第二个是设置y的位置，第三个和第四个是设置形状的宽度和高度。

例4：设置左上角起始

       默认情况下ellipse()函数前面两个参数值设置定义椭圆的x和y轴的位置，后面两个参数是设置椭圆的宽和高。在程序中运行ellipseMode(CORNER)之后，ellipse()函数的前两个参数则是定义椭圆的左上角位置。

       先写代码如图7

                                     图7

         保存并运行如图8

                                       图8

二、绘图顺序

       绘图是有顺序的，如果想将一个图形绘制在另外一个图形的后面，那么我们需要把这个图形的代码放在另外一个图形代码的前面。

       比如我们想先画椭圆在画长方形，先写代码如图9

                                        图9

         保存并运行如图10

                                       图10

          反之，我们想先画长方形在画椭圆，我们可以将长方形代码放到椭圆代码前面，代码如图11

                                    图11

         保存运行如图12

                                    图12

        注意：图10和图12中，我们可以看到，我们添加的最后一个元素会显示在最前面。先画的东西会被后面的挡住。

三、总结

        那么这期形状属性和绘图顺序内容就讲完了，下期我们讲自定义图形和色彩。