Javascript 画布网格在不同的缩放级别变得模糊

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

JS:

var bw=window.innerWidth/2//填充前的画布大小
var bh=窗内高度/1.3//填充前的画布大小
//网格周围的填充，h和w
var-pW=30；
var-pH=2；
var-lLimit=0//创建8x8的高度和宽度的9行限制
//画布的大小-它将包括网格周围从四面八方开始的填充+网格本身。这是一个总数
var cw=bw+pW；
var ch=bh+pH；
var canvas=$（''）.attr（{width:cw，height:ch}）.appendTo（'body'）；
var context=canvas.get（0.getContext（“2d”）；
函数drawBoard（）{
对于（var x=0；lLimit而言，问题在于您正在使用十进制值进行绘制。
绘图板（）中的画布宽度和位置都会增加
循环使用分数。画布是位图表面，而不是矢量图形。设置画布的宽度和高度时，设置存储在内存中的实际像素数。该值不能是小数（浏览器可能只修剪小数部分）。当您尝试在小数点位置绘制时，画布将使用像素插值以避免锯齿，因此偶尔会出现模糊

在绘图之前，请参见一个版本，其中我将
x
：

在绘制值之前尝试四舍五入，但不要在实际逻辑中。这样，随着算法不断增加值，不精确性不会叠加

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

此外，请确保画布没有任何CSS设置尺寸。这只会在绘制图像后拉伸图像，而不是增加绘图表面。如果要通过为画布指定100%的宽度和高度来填充块，则需要一些JS来计算CSS指定的高度和宽度，并设置画布的宽度和宽度值基于该属性的高度属性。然后，您可以在画布绘制代码中实现自己的缩放功能，但根据您所做的操作，这可能会有些过火。
为防止模糊，您应该在设置
画布
元素的尺寸时考虑（当然，在随后的绘图过程中要考虑这些尺寸）

canvas
元素的
width
和
height
属性所包含的值应按比例高于同名CSS属性中的值。这可以表示为以下函数：

function setCanvasSize（画布、宽度、高度）{
var比率=window.devicePixelRatio，
style=canvas.style；
style.width=''+（宽度/比率）+'px'；
style.height=''+（高度/比率）+'px'；
画布宽度=宽度；
canvas.height=高度；
}
为了消除画布缩放/缩放时的模糊效果，我在css中使用了
图像渲染：像素化
当你说缩放级别时，你是说大多数浏览器都内置了缩放功能（使用control+mwheel up/down）？是的。window.innerWidth会在页面加载时考虑用户当前的缩放级别。我尝试实现的网格系统的一个实例是：无论您以何种缩放级别进入网页，甚至在游戏中进行放大和缩小时，网格系统看起来都是一样的。js2dx.com是一个试图解决“画布”中模糊问题的库标记。我应用了您所做的，但它不起作用。将您的缩放级别设置为200%以上，然后刷新页面。然后将其设置为300%并刷新。您将注意到每个缩放级别的变化；它变厚或变薄。测试应在常规HTML窗口上执行，而不是在JSFIDLE上执行，因为差异不明显。
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();
}

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;
}