javascript - Canvas 网格在不同的缩放级别变得模糊

Question

我正在尝试创建一个简单的 Canvas 网格，它将适合玩家当前的缩放级别，但也适合特定的 Canvas 高度/宽度比例屏幕限制。这是我到目前为止得到的:

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(); 

现在，我成功地使 Canvas 对于每个屏幕分辨率缩放级别都处于相同的比例级别。这是我想要实现的目标的一部分。我还尝试实现细线，在所有不同的缩放级别下看起来都一样，当然还要消除模糊。现在的厚度的线条根据缩放级别而变化，有时会变得模糊。

这是 jsFiddle(尽管 jsFiddle 窗口本身很小，所以您几乎不会注意到其中的区别):

https://jsfiddle.net/wL60jo5n/

帮助将不胜感激。

Answer 1

为防止模糊，您应该考虑 window.devicePixelRatio在设置 canvas 元素的尺寸时(当然，在随后的绘制过程中考虑该尺寸)。

canvas 元素的

width 和 height 属性包含的值应按比例高于同名 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;
}