html5 文字定义线宽,HTML5画布和线宽

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 actual

area to be filled (dark blue) only extends halfway into the pixels on

either side of the path. 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. This is what

happens with the 1.0 width line in the prevIoUs example code.

To fix this,you have to be very precise in your path creation. 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.