Chapter 13. Drawing the Lines
Chapter 13. Stroke Effects
Throughout the book, we have used the
stroke property to draw outlines around a shape (or text). In this chapter, we will explore the full possibilities of strokes.
At first glance, it may not seem that there are a lot of possibilities for a stroke. It’s just an outline, right?
It can be, but it doesn’t have to be. A stroke is really a secondary shape, built upon the element that defines it. When that stroke is only a single pixel wide, it is easy to figure out where those pixels should go. But as strokes get thicker, they create multiple options for how the stroke’s geometry should relate to the underlying shape’s geometry, at corners and at line ends.
You can also change up the geometry of the stroke more directly, by breaking it into a dash pattern. This can be used to create a number of patterns and effects, beyond simple dashed lines.
Once you have a stroke shape (dashed or otherwise), you need to decide how to color it in. Just like with the fill shape, you have a choice of a solid color, semitransparent color, or a complex paint server—gradients and patterns. The options are mostly the same as
fill, but with a few extra complications.
In the simple case, a stroke is a continuous outline around the shape, drawn in a single color.
Except…even that isn’t always simple. The wider a stroke gets, the more you start to notice the details of how it is constructed.
A Simple Stroke to Start
There are three ...