一个愚蠢的简单画布用法：
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "#CCCC00";
ctx.lineWidth = 3;
ctx.strokeRect(0,width,height);
产生一个矩形,上面和左边的线条较窄：
为什么会这样呢？我需要用padding来补偿吗？它很烦人.
解决方法
2件事情
首先,奇数行宽(1,3,5,…)绝对不会用整数像素值绘制.这是因为X和Y是指像素之间的空间,而不是它们的中心.因此,从[1,1]到[1,10]运行的1的笔画将半像素的左列像素溢出一半,并向右移动一半.如果你从[1.5,1]到[1.5,10]画线,那么它将填满左边的一半,一半到右边填满整个像素列.
任何奇数的宽度都会显示这种行为,但即使是数字也不会因为它们填满了每一面的整个像素.
第二,盒子被画布顶部遮蔽.当您将[3,0]上的3px笔画居中时,它将会溢出,远远超出画布的可见范围[-1.5,-1.5].所以它看起来应该是一半的厚度.
看到差异的证明在这里：
http://jsfiddle.net/F4cqk/2/
