如何使用HTML5画布绘制带有1像素边框的矩形？

Question

4

我不知道为什么在创建的矩形的右下角会出现白点。（只在WinXP下的21.0.1180.83和.89版本中可见）

这取决于画布的高度...

dot

- user669677

1

白点在Firefox 15.0中不可见。 - mas-designs

1

在Chromium 18.0.1025.168（Developer Build 134367 Linux）Ubuntu 12.04中，白点不可见。 - Jasper de Vries

1

Chrome 21.0.1180.82在OS X 10.8.1上无法显示白色点。 - Jørgen R

1

在我的浏览器（Windows 7上的Opera 12.02）中看起来很好。似乎你发现了一个特定于浏览器的错误。 - Philipp

在Windows 7上，Chrome 21.0.1180.83 m下可见。 - MarcoK

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MarcoK · Answer 1

这可能与子像素渲染有关。看着你的代码，你做了以下操作：

c.rect(10.5, 10.5, 100, 100);

这意味着：“在X轴和Y轴坐标分别为10.5像素的位置上，绘制一个大小为100x100像素的矩形。”屏幕/浏览器无法渲染“半个像素”，因此它总是在某个地方四舍五入。这可能是您问题的原因。

要解决此问题，只需不要对此类事物使用半值即可。这样做很好：

c.rect(10, 10, 100, 100);