Fatal编程技术网
  • canvas/
  • Canvas 如何修复偶数单元格的画布网格？

Canvas 如何修复偶数单元格的画布网格？

canvas html5-canvas

Canvas 如何修复偶数单元格的画布网格？,canvas,html5-canvas,Canvas,Html5 Canvas,我尝试用网格填充画布矩形或正方形，但有时对于大小为16px16px的画布，我得不到偶数或单元格，但对于32x32px，它可以工作 我的尝试失败了 如何修复它 for (i = 0; i <= height; i += gridSize) { ctx.moveTo(1, i); ctx.lineTo(width, i); ctx.stroke(); } for (i = 0; i <= width; i += gridSize) { ctx

我尝试用网格填充画布矩形或正方形，但有时对于大小为16px16px的画布，我得不到偶数或单元格，但对于32x32px，它可以工作

我的尝试失败了

如何修复它

  for (i = 0; i <= height; i += gridSize) {
    ctx.moveTo(1, i);
    ctx.lineTo(width, i);
    ctx.stroke();
  }

  for (i = 0; i <= width; i += gridSize) {
    ctx.moveTo(i, 1);
    ctx.lineTo(i, height);
    ctx.stroke();
  }

for（i=0；i在您的代码中，您正在设置网格大小，因此如果您需要偶数个单元格，那么唯一的选项是将列和行设置为满足您需要的值，请参见下面的代码



函数交叉模板（网格选项，画布）{
设ctx=canvas.getContext（'2d'）；
ctx.strokeStyle=gridOptions.color；
ctx.lineWidth=gridOptions.linesSize；
ctx.translate（0.5,0.5）；
h=gridOptions.GridSize*gridOptions.rows+1
w=gridOptions.GridSize*gridOptions.columns+1
for（设i=1；i