キャンバスグリッドが異なるズームレベルでぼやけて表示される

Question

プレーヤーの現在のズームレベルに適合する単純なキャンバスグリッドを作成しようとしていますが、特定のキャンバスの高さ/幅に比例した画面制限にも適合します。

JS：ここで私はこれまで得たものである

var bw = window.innerWidth/2; //canvas size before padding 
var bh = window.innerHeight/1.3; //canvas size before padding 
//padding around grid, h and w 
var pW = 30; 
var pH = 2; 
var lLimit = 0; //9 line limit for both height and width to create 8x8 

//size of canvas - it will consist the padding around the grid from all sides + the grid itself. it's a total sum 
var cw = bw + pW; 
var ch = bh + pH; 

var canvas = $('<canvas/>').attr({width: cw, height: ch}).appendTo('body'); 

var context = canvas.get(0).getContext("2d"); 

function drawBoard(){ 

    for (var x = 0; lLimit <= 8; x += bw/8) { //handling the height grid 
     context.moveTo(x, 0); 
     context.lineTo(x, bh); 
     lLimit++; 
    } 

    for (var x = 0; lLimit <= 17; x += bh/8) { //handling the width grid 
     context.moveTo(0, x); //begin the line at this cord 
     context.lineTo(bw, x); //end the line at this cord 
     lLimit++; 
    } 
    //context.lineWidth = 0.5; what should I put here? 
    context.strokeStyle = "black"; 
    context.stroke(); 
} 

drawBoard(); 

を今、私は、各画面の解像度のズームレベルで同じ比例したレベルになるようにキャンバスを作るに成功しました。これは私が達成しようとしていることの一部です。私はまた、すべての異なるズーミングレベルで同じように見える細い線を実現しようとします。もちろん、ぼやけを取り除くこともできます。現在のところ、線の厚さは、ズーミングレベルに応じて変化し、時にはぼやけていることがある。ここで

はjsFiddle（jsFiddleウィンドウ自体は小さいもののので、あなたはほとんど違いに気づくでしょう）です。

https://jsfiddle.net/wL60jo5n/

ヘルプは非常に高く評価されます。

Answer 1

問題は、小数の値をで描画していることです。あなたのdrawBoard()ループのキャンバスの幅と位置の増分の両方が小数点を使用します。キャンバスはビットマップサーフェスであり、ベクトル図ではありません。キャンバスの幅と高さを設定すると、メモリに格納されている実際のピクセル数を設定します。その値は10進数にすることはできません（ブラウザはおそらく小数部分をトリミングするだけです）。小数点位置を描画しようとすると、キャンバスはピクセル補間を使用してエイリアシングを回避します。そのため、時折ボケが発生します。

私は描画する前にxを丸めるバージョンを参照してください： https://jsfiddle.net/hts7yybm/

はなく、実際のロジックでは、あなたがそれらを描く直前に値を丸めてください。この方法では、アルゴリズムが値を加算し続けるので、不正確さは積み重なりません。

function drawBoard(){ 
    for (var x = 0; lLimit <= 8; x += bw/8) { 
    var roundedX = Math.round(x); 
    context.moveTo(roundedX, 0); 
    context.lineTo(roundedX, bh); 
    lLimit++; 
    } 

    for (var x = 0; lLimit <= 17; x += bh/8) { 
    var roundedX = Math.round(x); 
    context.moveTo(0, roundedX); 
    context.lineTo(bw, roundedX); 
    lLimit++; 
    } 
    context.lineWidth = 1; // never use decimals 
    context.strokeStyle = "black"; 
    context.stroke(); 
} 

---

編集：私は、キャンバスはimg要素であるかのように、すべてのブラウザでは動作しますかなり確信しているので、ユーザーがブラウザのズーム機能をズームしたときにエイリアシングを防止するための方法は、接頭辞を持つ以外にありませんCSS。それでも、ブラウザのズーム機能がその点を考慮しているかどうかはわかりません。

canvas { 
    image-rendering: -moz-crisp-edges; 
    image-rendering: -o-crisp-edges; 
    image-rendering: -webkit-optimize-contrast; 
    image-rendering: crisp-edges; 
    -ms-interpolation-mode: nearest-neighbor; 
} 

また、キャンバスにCSSセットのサイズがないことを確認してください。これは、描画面を上げる代わりに描画された後にのみ画像を伸ばします。キャンバスに100％幅と高さを指定してブロックを塗りつぶしたい場合は、CSSで指定された高さと幅を計算し、それに基づいてキャンバスの幅と高さのプロパティの値を設定するJSが必要です。次に、キャンバスの描画コードの中に独自のズーム機能を実装することができますが、何をしているのかに応じて、それは過度のことかもしれません。

Answer 2

ぼかしを防止するには、canvas要素の寸法を設定する際には、window.devicePixelRatioを考慮する必要があります（もちろん、後で描画する際の寸法を考慮する必要があります）。

およびheightcanvas要素のプロパティには、同じ名前のCSSプロパティの値より比例した値が含まれている必要があります。これは例えば以下のように表すことができる。

function setCanvasSize(canvas, width, height) { 
    var ratio = window.devicePixelRatio, 
     style = canvas.style; 

    style.width = '' + (width/ratio) + 'px'; 
    style.height = '' + (height/ratio) + 'px'; 

    canvas.width = width; 
    canvas.height = height; 
}