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)

相关推荐