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