By default this property is set to butt: butt There are three possible values for this property and those are: butt, round and square. The lineCap property determines how the end points of every line are drawn. A 1.0-width vertical line drawn at the correct position will become a crisp 2-pixel line when scaled up by 2, and will appear at the correct position. While slightly painful when initially working with scalable 2D graphics, paying attention to the pixel grid and the position of paths ensures that your drawings will look correct regardless of scaling or any other transformations involved. See the next two sections for demonstrations of these additional line styles.įor even-width lines, each half ends up being an integer amount of pixels, so you want a path that is between pixels (that is, (3,1) to (3,5)), instead of down the middle of pixels.
#How to apply lines stylish style set full
Note also that only start and final endpoints of a path are affected: if a path is closed with closePath(), there's no start and final endpoint instead, all endpoints in the path are connected to their attached previous and next segment using the current setting of the lineJoin style, whose default value is miter, with the effect of automatically extending the outer borders of the connected segments to their intersection point, so that the rendered stroke will exactly cover full pixels centered at each endpoint if those connected segments are horizontal and/or vertical. Note: Be aware that in our vertical line example, the Y position still referenced an integer gridline position-if it hadn't, we would see pixels with half coverage at the endpoints (but note also that this behavior depends on the current lineCap style whose default value is butt you may want to compute consistent strokes with half-pixel coordinates for odd-width lines, by setting the lineCap style to square, so that the outer border of the stroke around the endpoint will be automatically extended to cover the whole pixel exactly). Knowing that a 1.0 width line will extend half a unit to either side of the path, creating the path from (3.5,1) to (3.5,5) results in the situation in the third image-the 1.0 line width ends up completely and precisely filling a single pixel vertical line.
To fix this, you have to be very precise in your path creation. This is what happens with the 1.0 width line in the previous example code. An approximation of this has to be rendered, which means that those pixels being only partially shaded, and results in the entire area (the light blue and dark blue) being filled in with a color only half as dark as the actual stroke color. The actual area to be filled (dark blue) only extends halfway into the pixels on either side of the path.
If you consider a path from (3,1) to (3,5) with a line thickness of 1.0, you end up with the situation in the second image. The entire area between them (light red) falls on pixel boundaries, so the resulting filled rectangle will have crisp edges. In the first grid image below, a rectangle from (2,1) to (5,5) is filled. The squares between gridlines are actual on-screen pixels.
In the images below, the grid represents the canvas coordinate grid. Obtaining crisp lines requires understanding how paths are stroked.
0 kommentar(er)
