粗线条html,html5 – 画布元素中的线条粗细

注意部分

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);

}

}