canvasでのピクセルペイントの問題

1447 ワード

pixlの描画、1.描画点が隣接する画素の交差線にある場合、x画素の線幅を描画すると、交差線からそれぞれx/2画素を前方から後方に描画し、x/2が整数であればx画素をちょうど埋め尽くし、小数であれば整数格子を埋めてから残りの小数部を描画し、描画時に小数部の色を1画素の幅で割ると色が薄くなります.したがって、整数座標で描く場合(すなわち、描画点が隣接する画素の交差線にある場合)、線幅は2の整数倍でなければなりません.満たされていないピクセルが表示されます.
2.ペイントポイントが1ピクセルの中央にある場合は、上と同じです.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)