Question

我正在尝试使用HTML5 Canvas中的路径来构建单元格对象。但是我无法对我制作的路径进行填充。尝试了几件事但却无法解决。

class Cell {
  constructor({ i, j }) {
    this.i = i;
    this.j = j;
    this.visited = false;
    this.walls = [true, true, true, true]; // top right bottom left
    this.show = canvasContext => this._show(canvasContext);
  }

  _show(ctx) {
    const x = this.j * cellSize;
    const y = this.i * cellSize;
    if (!this.visited) {
      ctx.fillStyle = "green";
    } else {
      ctx.fillStyle = "yellow";
    }
    // ctx.fillStyle = "green";
    ctx.strokeStyle = "black";
    ctx.beginPath();
    if (this.walls[0]) {
      ctx.moveTo(x, y);
      ctx.lineTo(x + cellSize, y); // top
    }
    if (this.walls[3]) {
      ctx.moveTo(x, y);
      ctx.lineTo(x, y + cellSize); // left
    }
    if (this.walls[1]) {
      ctx.moveTo(x + cellSize, y);
      ctx.lineTo(x + cellSize, y + cellSize); // right
    }
    if (this.walls[2]) {
      ctx.moveTo(x, y + cellSize);
      ctx.lineTo(x + cellSize, y + cellSize); // bottom
    }
    ctx.fill();      
    ctx.stroke();
    // ctx.fill();
  }
}

在Maze Generator上查看Dhanushu的笔@dhanushuUzumaki（CodePen）。

Answer 1

问题似乎是你没有创建一个封闭的形状，你只是创建了一系列不形成形状的线条。

这是一条封闭的道路。如果你拿了一支铅笔画了点，你会发现它会被关闭。

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = "#F00"; // red
ctx.strokeStyle = "#0F0"; // green

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 50);
ctx.lineTo(100, 100);
ctx.lineTo(50, 100);
ctx.closePath();

ctx.fill();
ctx.stroke();

canvas {
 border: 1px solid #000;
}

<canvas />

这是一条开放的道路，中风看起来是一样的：

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = "#F00"; // red
ctx.strokeStyle = "#0F0"; // green

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 50);

ctx.moveTo(100, 50);
ctx.lineTo(100, 100);

ctx.moveTo(100, 100);
ctx.lineTo(50, 100);

ctx.moveTo(50, 100);
ctx.lineTo(50, 50);

ctx.closePath();

ctx.fill();
ctx.stroke();

canvas {
 border: 1px solid #000;
}

<canvas />

通过致电moveTo()，您实际上是在挑选铅笔，并打破形状。没有什么可以填补的，因为它不是一条连续的道路。它只是4条相互靠近的独立线条。

对于您的特定问题，我看到两种解决方法。第一种方法是经常停止使用moveTo()并绘制线条。但是，对于您的特定问题，这可能会很棘手。

相反，您可能要绘制的是绘制单个矩形以填充网格的每个块。似乎逻辑可能更容易解决。

无法为路径绘制的矩形

1 个答案: