javascript - HTML5、 Canvas 和 strokeRect : some lines too narrow and blurry

Question

一个愚蠢的简单 Canvas 用法:

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] 绘制那条线，那么它会向左填充一半，向右填充一半，从而填满整个完美的像素列。

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

---

其次，盒子被 Canvas 的顶部遮住了。当您将 3px 笔划置于 [0,0] 的中心时，它会向上和向左溢出到 [-1.5,-1.5] 的可见范围之外 Canvas 。所以它看起来只有应有的一半厚。

---

在此处查看差异证明:

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 笔划。