canvas中的像素绘制问题

pixl的绘制，1.如果绘制点正处于相邻像素交叉线，绘制x像素的线宽，则从交叉线分别向前向后绘制x/2个像素，如果x/2是整数，则刚好填满x个像素，如果是小数，则先把整数格填满，再去绘制剩下的小数部分，绘制时，是将小数部分的颜色用来除以一个像素的宽度，颜色会变淡。所以要用整数坐标来画的话（即绘制点正处于相邻像素交叉线时），线宽必须是2的整数倍。否则会出现不饱满的像素。

2.如果绘制点为一个像素的中间位置，情况跟上面一样。也是分别向前向后绘制x/2个像素.要用它来绘制饱满的线宽，线宽必须是奇数。因为这样除以2后小数部分有个0.5，刚好填充中间位置的这个像素，剩下的整数部分用来指定剩下的像素点。

从上面可以知道，要绘制偶数线宽的线，为使其饱满，必须用整数坐标，绘制奇数线宽的直线，必须用像素中点坐标；

3.还可以这样使用，既然当是小数时，可能会使颜色变淡.看起来感觉还不错测试代码如下：

function  drawGrid(w,h,stepx,stepy){
       	context.save();
       	context.lineWidth=3;//在这里更改线宽
       	context.strokeStyle='#666'
       	context.clearRect(0,0,w,h);
       	var k=0;
       	// interval=interval|| 5.5;//default  5;
       		for(var i=stepx;i<w;i+=stepx){
       			k=i;//上面介绍的第一种情况
       			context.beginPath()
       			context.moveTo(k,0);
       			
       			context.lineTo(k,h);
       			context.stroke();

       		}
       		for(var i=stepy;i<h;i+=stepy){
       			k=i+0.5;//第二种情况
       			context.beginPath()
       			context.moveTo(1,k);
       			
       			context.lineTo(w,k);
       			context.stroke();

       		}
       		context.restore()
       }
       drawGrid(context.canvas.width,context.canvas.height,10,10)