HTML5，canvas和strokeRect：线条更窄？

Question

一个简单的简单画布用法：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.strokeStyle = "#CCCC00";
ctx.lineWidth = 3;
ctx.strokeRect(0, 0, width, height);

产生一个沿顶部和左边有较窄线条的矩形：

为什么会这样？我需要用填充来抵消吗？这很烦人。

Answer 1

2件事。

首先，奇数lineWidths（1,3,5，...）永远不会干净地应用整数像素值绘制。这是因为X和Y指的是像素之间的空间而不是它们的中心。因此，从[1,1]到[1,10]的1行程溢出一半到像素左列的像素，一半到右边。如果您改为从[1.5,1]到[1.5,10]绘制该线，则它会向左填充一半，向右填充一半，从而完全填满整个像素列。

任何奇数宽度都会显示此行为，但偶数则不会，因为它们会在每一面上填满整个像素看起来干净。

---

其次，画布的顶部遮住了框。当你将3px笔划置于[0,0]中心时，它向上和向左溢出为[-1.5，-1.5]，这超出了画布的可见范围。所以它看起来应该是它的一半厚度。

---

请在此处查看差异证明： http://jsfiddle.net/F4cqk/2/

第一个就像你的代码一样。第二个从左上边缘移开，以显示其宽度均匀。第三部分展示了如何在没有亚像素模糊的情况下渲染3px笔划。

Answer 2

因为你告诉它画一条宽度为3的线在0 ...所以它的1/3将会离开你的画布......

http://jsfiddle.net/mhFLG/ vs http://jsfiddle.net/mhFLG/1/