如何使用 html5 画布绘制具有 1px 边框的矩形？

Question

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

这取决于画布高度...

http://jsbin.com/ejeyef/1/

Answer 1

这可能与 Subpixel rendering 有关。查看您的代码，您执行以下操作：

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

这意味着：“在距离 X 10.5px 和距离 Y 10.5px 的坐标处绘制一个大小为 100x100px 的矩形”。屏幕/浏览器无法呈现“半像素”，因此它总是在某处四舍五入。这可能是您的问题的原因。

要解决此问题，请不要对此类事情使用半值。这工作正常：

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