2

キャンバスを使用してグリッドを描画する次のコードがあるとします。

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    rows = 10,
    cols = 10,
    size = canvas.getAttribute("width") / rows;

drawGrid();

function drawGrid() {
    for (var i = 0; i < rows; i++) {
        for (var j = 0; j < cols; j++) {
            ctx.strokeStyle ='rgba(242, 198, 65, 0.1)'; 
            ctx.strokeRect(i * size, j * size, size, size);
            ctx.fillStyle = 'rgb(38,38,38)';
            ctx.fillRect(i * size, j * size, size, size);
       }
   }
}

ここで結果を表示できます

私の質問は、行にコメントを付けるとグリッドが太く見える理由ですctx.fillRect(i * size, j * size, size, size);

編集

を使用せずに同じ結果を得るにはどうすればよいfillRectですか?

</p>

4

3 に答える 3

3

ストロークはハーフ ピクセルでレンダリングされるため、2 ピクセルにわたってぼやけます。塗りつぶしがその一部を覆っているため、再び半分のピクセルのように見えます。

0.5, 0.5簡単な解決策は、ピクセル全体を描画するために描画をオフセットすることです。詳細については、http ://diveintohtml5.info/canvas.html の次のセクションを参照してください。

Q: なぜ x と y を 0.5 から始めたのですか? なぜ0ではないのですか？

とにかく、グリッドを作成するために四角形を使用するべきではありません。線を使用するだけでよく、グリッドが完成したら、最後に 1 回だけストロークする必要があります。そうすることで、半透明のグリッドのグリッド ラインの交点に太いスポットができなくなります。

次に例を示します。

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    rows = 10,
    cols = 10,
    size = canvas.width / rows,
    width = canvas.width,
    height = canvas.height;
drawGrid();


function drawGrid() {
    // An odd-sized lineWidth means we should translate to draw on whole pixels
    ctx.translate(0.5, 0.5);
    for (var i = 1; i < rows; i++) {
        ctx.moveTo(0, i * size);
        ctx.lineTo(width, i * size);
    }
    for (var j = 1; j < cols; j++) {
        ctx.moveTo(j * size, 0);
        ctx.lineTo(j * size, height);
    }
    // translate back:
    ctx.translate(-0.5, -0.5);
    // setting stroke style and stroking just once
    ctx.strokeStyle = 'rgba(242, 198, 65, 0.1)';
    ctx.stroke();
}

</p>

フィドル: http://jsfiddle.net/tZqZv/4/

于 2012-11-28T03:00:22.420 に答える
2

レンダリングされたストロークは、ピクセルの境界をまたいでいます。これは、アンチエイリアシング効果のように見える外観に現れるため、塗りつぶしが適用されておらず、ピクセルの境界線と重なっていない場合、線が太く表示されます。0.5 だけ変換すると、ピクセルの境界をまたぐことはなく、塗りつぶしが適用されているかどうかにかかわらず、線の太さに違いは見られません。これが例です。

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    rows = 10,
    cols = 10,
    size = canvas.getAttribute("width") / rows - 5;
drawGrid();


function drawGrid() {
    for (var i = 0; i < rows; i++) {
        for (var j = 0; j < cols; j++) {
            ctx.strokeStyle ='rgba(0, 0, 0, 1)';
            ctx.strokeRect(i * size + 0.5, j * size + 0.5, size, size);
            ctx.fillStyle = 'rgb(38,128,128)';
            //ctx.fillRect(i * size + 0.5, j * size + 0.5, size, size);
        }
    }
}

これは効果へのまともな参照です。

于 2012-11-27T21:58:05.500 に答える
1

fillRectによって描かれた境界線と重なっているからですstrokeRect。

于 2012-11-27T21:46:32.583 に答える