在Html5中，从（0.5,0）到（0.5,600）绘制以在画布上获得1像素粗线。 0.5是奇怪的？ [英] In Html5, draw from (0.5, 0) to (0.5, 600) to get a 1-pixel thick line on canvas. The 0.5 is strange?
问题描述
我正在阅读一本关于Html5和canvas的书，下面的代码将生成1像素的粗线...它使用0.5作为坐标。如果它被改为0或10，或一些整数，那么线将是灰色的，2像素厚。这是为什么？我最近看到的最奇怪的事情...所有的编程以前在苹果或Win32 API，他们去整数坐标。
I am reading a book on Html5 and about canvas, the following code will generate 1-pixel thick lines... It uses 0.5 as the coordinate. If it is changed to 0 or 10, or some integer, then the lines will be gray, and 2-pixel thick. Why is that? That the strangest thing I have seen lately... all the programming before on Apple or Win32 API, they go by integer coordinates.
<!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; x <500; x + = 10）{x，x，x，y}为x的整数，但对于y使用整数
Another strange thing is, to get a 1 pixel by 1 pixel black dot, I have to draw on 0.5 for x, but use integers for y
for (x = 0.5; x < 500; x += 10) {
context.moveTo(x, 0)
context.lineTo(x, 1)
}
如果我使用下面的，那么我会得到一个灰色的长点
if I use the following, then I get a gray, "longer dot"
for (x = 0.5; x < 500; x += 10) {
context.moveTo(x, 0.5)
context.lineTo(x, 1.5)
}
推荐答案
感谢MiKy。我也找到了一些解释：
Thanks MiKy. I also found some explanation on:
这是相关内容：
获取简洁的线条需要了解路径的描述。在
下面的图像中，网格表示画布坐标网格。网格线之间的
正方形是实际的屏幕像素。在下面的第一个
网格图像中，填充从（2,1）到（5,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.
如果你考虑从（3,1）到（3,5）的线路厚度为
1.0的路径，你会得到第二个图像的情况。要填充的实际区域（深蓝色）仅延伸到
路径两侧的像素中途。必须渲染这种情况的近似值
，这意味着那些像素只有部分阴影，并且在整个区域（浅蓝色和深蓝色）中结果
被填充以
a颜色只有一半的黑色像实际的笔画颜色。这是
在前面示例代码中使用1.0宽度行发生的情况。
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.
要解决这个问题，你必须在你的路径创建非常精确。
知道一个1.0宽度线将延伸半个单位到路径的任一侧
，创建从（3.5,1）到（3.5,5）的路径导致
情况第三个图像 - 1.0行宽完全结束，
精确填充单个像素垂直线。
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.
这篇关于在Html5中，从（0.5,0）到（0.5,600）绘制以在画布上获得1像素粗线。 0.5是奇怪的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
