javascript - 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 的[1,10]一半溢出到左侧像素列的像素中，一半溢出到右侧。如果你改为从[1.5,1]to画出那条线，[1.5,10]它会向左填充一半，向右填充一半，完美地填充整个像素列。

任何奇数宽度都会显示这种行为，但偶数不会因为它们在每一侧填充一个完整的像素，看起来很干净。

---

其次，盒子被画布的顶部遮住了。当您将 3px 笔画居中时，[0,0]它会向上和向左溢出，[-1.5,-1.5]超出画布的可见范围。所以它看起来只有它应该有的一半厚。

---

在此处查看差异证明：

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

// original box, eclipsed by canvas bounds
ctx.strokeStyle = "#CC0000";
ctx.lineWidth = 3;
ctx.strokeRect(0, 0, 20, 20);

// moved from canvas bounds
ctx.strokeStyle = "#CC0000";
ctx.lineWidth = 3;
ctx.strokeRect(25, 25, 20, 20);

// drawn on half pixel coordinated to precent blurry lines with odd integer line widths.
ctx.strokeStyle = "#CC0000";
ctx.lineWidth = 3;
ctx.strokeRect(50.5, 50.5, 20, 20);

body { margin: 10px }

<canvas id="canvas" width="100" height="100"></canvas>

应该呈现这个：

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

Answer 2

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

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