注意部分
However, the leftmost and all other odd-integer-width thickness lines do not appear crisp, because of the path’s positioning.
和
Obtaining crisp lines requires
understanding how paths are stroked.
In the images below, the grid
represents the canvas coordinate grid.
The squares between gridlines are
actual on-screen pixels. In the first
grid image below, a rectangle from
(2,1) to (5,5) is filled. The entire
area between them (light red) falls on
pixel boundaries, so the resulting
filled rectangle will have crisp
edges.
所以,如果你画半像素(绘制奇数像素宽度线时),那么实际的绘制边将落在绝对像素上,看起来很好.
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
for (i=0;i<10;i++){
ctx.fillRect(5 + i*14, 5, 1+i, 140);
}
}