CSS固定网格（缩放时偏移）

Question

我正在尝试在HTML5画布上实现固定大小的网格。在发布之前，我找不到运气的答案。

在带有“内部”网格的画布上绘制网格。在以奇数比（1.1,1.3,1.6等）缩放/滚动时，较粗的线偏移了许多点。 （我现在在pt而不是px工作）

//toFixed(9)
var pageWidth = Math.round( Units.toPoint( $('.canvas').width() ) );

var gridSize1 = ( pageWidth / 6 ); //6 grids wide
var gridSize2 = ( gridSize1 / 4 ); //4x4 inner grid

我的代码只使用两个变量生成如下所示的CSS。

在100％（1）缩放时，画布为793px / 594pt;

background: -webkit-linear-gradient(90deg, black 2pt, rgba(0,0,0,0) 2pt),-webkit-linear-gradient(0deg, black 2pt, rgba(0,0,0,0) 2pt),-webkit-linear-gradient(0deg, black 1pt, rgba(0,0,0,0) 1pt),-webkit-linear-gradient(90deg, black 1pt, rgba(0,0,0,0) 1pt),rgb(233, 233, 233);
background-size: 99.16666666666667pt 99.16666666666667pt, 99.16666666666667pt 99.16666666666667pt, 24.791666666666668pt 24.791666666666668pt, 24.791666666666668pt 24.791666666666668pt;

130％缩放（1.3）时，画布为1031px / 773pt;

background: -webkit-linear-gradient(90deg, black 2pt, rgba(0,0,0,0) 2pt),-webkit-linear-gradient(0deg, black 2pt, rgba(0,0,0,0) 2pt),-webkit-linear-gradient(0deg, black 1pt, rgba(0,0,0,0) 1pt),-webkit-linear-gradient(90deg, black 1pt, rgba(0,0,0,0) 1pt),rgb(233, 233, 233);
background-size: 128.83333333333334pt 128.83333333333334pt, 128.83333333333334pt 128.83333333333334pt, 32.208333333333336pt 32.208333333333336pt, 32.208333333333336pt 32.208333333333336pt;

200％缩放（2）画布为1586px / 1189pt;

background: -webkit-linear-gradient(90deg, black 2pt, rgba(0,0,0,0) 2pt),-webkit-linear-gradient(0deg, black 2pt, rgba(0,0,0,0) 2pt),-webkit-linear-gradient(0deg, black 1pt, rgba(0,0,0,0) 1pt),-webkit-linear-gradient(90deg, black 1pt, rgba(0,0,0,0) 1pt),rgb(233, 233, 233);
background-size: 198.33333333333334pt 198.33333333333334pt, 198.33333333333334pt 198.33333333333334pt, 49.583333333333336pt 49.583333333333336pt, 49.583333333333336pt 49.583333333333336pt;

有人可以告诉我这里哪里出错了，因为我相信有些东西非常愚蠢我不知道了吗？看起来内部网格（4x4）略微移动。 （抱歉图片的大小越来越大！）

Answer 1

忘了这个！

我只是将整个实现更改为使用画布绘制而不是CSS渐变。