javascript - 如何使用 html5 canvas 绘制边框为 1px 的矩形？

Question

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

这取决于 Canvas 的高度...

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

Answer 1

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

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

这意味着:“在距 X 10.5 像素、距 Y 10.5 像素的坐标处绘制一个大小为 100x100 像素的矩形”。屏幕/浏览器无法呈现“半像素”，因此它总是在某处变圆。这可能是您遇到问题的原因。

要解决此问题，只需不要对此类事情使用半值即可。这很好用:

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