在Html5中,从(0.5,0)到(0.5,600)绘制以在画布上获得1像素粗线.0.5很奇怪？
我正在读一本关于Html5和关于画布的书,以下代码将生成1像素粗线...它使用0.5作为坐标.如果将其更改为0或10或某个整数,则这些线将为灰色,并且为2像素厚.这是为什么？这是我最近看到的最奇怪的事情......在Apple或Win32 API之前的所有编程,它们都是整数坐标.
<!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, 0)
context.lineTo(x, 1)
}
如果我使用以下内容,那么我会得到一个灰色的"更长点"
for (x = 0.5; x < 500; x += 10) {
context.moveTo(x, 0.5)
context.lineTo(x, 1.5)
}
nop*_*ole 11
谢谢MiKy.我还发现了一些解释:
这是相关内容:
获得清晰的线条需要了解如何抚摸路径.在下面的图像中,网格表示画布坐标网格.网格线之间的正方形是实际的屏幕像素.在下面的第一个网格图像中,填充从(2,1)到(5,5)的矩形.它们之间的整个区域(浅红色)落在像素边界上,因此生成的填充矩形将具有清晰的边缘.
如果考虑从(3,1)到(3,5)的线路厚度为1.0的路径,最终会得到第二个图像中的情况.要填充的实际区域(深蓝色)仅延伸到路径两侧的像素中间.必须渲染这种近似值,这意味着这些像素仅部分遮蔽,并且导致整个区域(浅蓝色和深蓝色)填充的颜色仅为实际笔划颜色的一半.这是前面示例代码中1.0宽度行所发生的情况.
要解决这个问题,您必须非常精确地创建路径.知道1.0宽度线将半个单元延伸到路径的任一侧,创建从(3.5,1)到(3.5,5)的路径导致第三个图像中的情况 - 1.0线宽完全结束精确填充单个像素垂直线.
我不确定它与HTML5是一样的,但它看起来与Qt库处理绘画的方式非常相似.本质上,(0,0)和(1,1)坐标定义左上角的像素 - 因此其中心位于(0.5,0.5).
它与抗锯齿有关 - 如果你在(1,1)处"画"一个黑色像素,4个灰色像素实际上将被涂成灰色,介于(0,0)和(2,2)之间.使用Qt 4在C++ GUI编程中阅读更多相关信息.
| 归档时间： |
|
| 查看次数： |
3834 次 |
| 最近记录： |