canvasでのピクセルペイントの問題
1447 ワード
pixlの描画、1.描画点が隣接する画素の交差線にある場合、x画素の線幅を描画すると、交差線からそれぞれx/2画素を前方から後方に描画し、x/2が整数であればx画素をちょうど埋め尽くし、小数であれば整数格子を埋めてから残りの小数部を描画し、描画時に小数部の色を1画素の幅で割ると色が薄くなります.したがって、整数座標で描く場合(すなわち、描画点が隣接する画素の交差線にある場合)、線幅は2の整数倍でなければなりません.満たされていないピクセルが表示されます.
2.ペイントポイントが1ピクセルの中央にある場合は、上と同じです.x/2個の画素をそれぞれ前後に描く.フルな線幅を描くには、線幅が奇数でなければなりません.このように2で割った小数部は0.5で、ちょうど中間位置のこの画素を充填しているので、残りの整数部は残りの画素点を指定するために使用されます.
偶数の線幅の線を描くには、整数座標、奇数の線幅の直線を描くには、画素の中点座標が必要であることがわかります.
3.小数である以上、色が薄いなる場合がある.良い感じのテストコードは以下の通りです.
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)