<!DOCTYPE html>
<body>
<canvas id="c" width="800" height="600"></canvas>
</body>
<script>
var c_canvas = document.getElementById("c")
var context = c_canvas.getContext("2d")
for (x = 0.5; x < 500; x += 10) {
context.moveTo(x,0)
context.lineTo(x,375)
}
context.strokeStyle = "#000"
context.stroke()
</script>
另一个奇怪的事情是,要获得1像素乘1像素的黑点,我必须在x上绘制0.5,但是使用整数表示y
for (x = 0.5; x < 500; x += 10) {
context.moveTo(x,1)
}
如果我使用以下内容,那么我会得到一个灰色的“更长点”
for (x = 0.5; x < 500; x += 10) {
context.moveTo(x,0.5)
context.lineTo(x,1.5)
}
解决方法
这是相关内容：
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.
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.
