html canvas缩放抗锯齿,我可以关闭HTML

It must antialias vector graphics

Antialiasing is required for correct plotting of vector graphics that involves non-integer coordinates (0.4, 0.4), which all but very few clients will do.

When given non-integer coordinates, the canvas has two options:

Antialias - paint the pixels around the coordinate with respect to how far the integer coordinate is from non-integer one (the rounding error).

Round - apply some rounding function to the non-integer coordinate (so 1.4 will become 1, for example).

The later strategy will work for static graphics, although for small graphics (a circle with radius of 2) curves will show clear steps rather than smooth curve.

The real problem is when the graphics is translated (moved) - the jumps between one pixel and another (1.6 => 2, 1.4 => 1), mean that the origin of the shape may jump with relation to the parent container (constantly shifting 1 pixel up/down and left/right).

Some tips

Tip #1: You can soften (or harden) antialiasing by scaling the canvas (say by x) then apply the reciprocal scale (1/x) to the geometries yourself (not using the canvas).

Compare (no scaling):

with (canvas scale: 0.75; manual scale: 1.33):

and (canvas scale: 1.33; manual scale: 0.75):

Tip #2: If a jaggy look is really what you're after, try to draw each shape a few times (without erasing). With each draw, the antialiasing pixels get darker.

Compare. After drawing once:

After drawing thrice: