HTML5，canvas和strokeRect：行较窄？

愚蠢的简单的帆布用法：HTML5，canvas和strokeRect：行较窄？

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

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

产生具有沿着顶部和左窄线矩形：

enter image description here

为什么会出现这种情况？我需要用填充补偿吗？它很烦人。

来源

2012-04-04 Wells

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/

enter image description here

第一个是喜欢你的代码。第二个从左上角移开以显示其宽度均匀性。第三部分展示了如何渲染一个没有子像素模糊的3像素笔画。

来源

2012-04-04 00:59:53

非常有趣的回应 - 谢谢。 – Wells 2012-04-04 05:29:21

因为你告诉它在0到绘制的3宽度的行...所以它的1/3将是把你的画布...

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

来源

2012-04-04 00:49:04 Langdon

其实它不会是线的1/3，而是一半。 – 2012-04-04 01:27:38

@AlexWayne不是以像素为单位的线宽？如何渲染只有1.5像素？编辑 - 哦，上帝，总之，是反对别名从3px行... wtf – Langdon 2012-04-04 02:30:08

HTML5，canvas和strokeRect：行较窄？

回答

相关问题