javascript - 从另一个函数绘图时 Canvas 线不停留

Question

我不明白为什么我的线条没有画出来。我正在尝试合并两张“图画”。

• 网格(画得非常好)。
• 其他几条线(也画得很好)。

但是当我将两者结合起来时，我失去了线条或者它们“似乎”没有被绘制。

*请注意，我有 2 个函数，每个函数都获取上下文。再说一次，我可以画一个，但不能画另一个(它们不会在 Canvas 上结合)。另外，阅读另一个 StackOverflow 问题，该问题是通过添加 beginPath() 来回答的，没有区别。和this one没用。

我错过了什么/做错了什么？

var canvas = document.getElementById("canvasId");
canvas.width = 300;
canvas.height = 300;
var ctx = canvas.getContext("2d");
printLogContext(ctx);
console.log(`__________`);

ctx.beginPath();
//drawGrid(ctx, 300, 300);  
drawAxes(ctx);
drawGrid(ctx, 300, 300);

function drawAxes(context) {
  printLogContext(context);
  context.beginPath;
  context.strokeStyle = "000000";
  context.beginPath();

  context.moveTo(0, 150);
  context.lineTo(300, 150);

  context.moveTo(150, 0);
  context.lineTo(150, 300);

  context.stroke();
  context.closePath();

}

function drawGrid(ctx, width, height) {
  var step = 10;
  ctx.strokeStyle = "#E5F7F6";
  //resetTransform(ctx);
  for (var row = 0; row < width; row = row + step) {
    ctx.moveTo(0, row);
    ctx.lineTo(width, row);
    ctx.stroke();
  }

  for (var col = 0; col < height; col = col + step) {
    ctx.moveTo(col, 0);
    ctx.lineTo(col, height);
    ctx.stroke();
  }
}

function printLogContext(ctx) {
  (ctx) ? console.log(`Have ctx`): console.log(`Don't habe ctx`);
}

<canvas id="canvasId" style="border: solid"></canvas>

Answer 1

这两个函数都可以很好地绘制。

问题是黑色轴被浅蓝色网格覆盖。

如果更改函数的顺序，您也会看到轴。

(定义颜色时还必须使用#，甚至是黑色)

var canvas = document.getElementById("canvasId");
canvas.width = 300;
canvas.height = 300;
var ctx = canvas.getContext("2d");
printLogContext(ctx);
console.log(`__________`);

drawGrid(ctx, 300, 300);
drawAxes(ctx);

function drawAxes(context) {
  printLogContext(context);
  context.strokeStyle = "#000000";
  context.beginPath();

  context.moveTo(0, 150);
  context.lineTo(300, 150);

  context.moveTo(150, 0);
  context.lineTo(150, 300);

  context.stroke();
  context.closePath();

}

function drawGrid(ctx, width, height) {
  var step = 10;
  ctx.strokeStyle = "#E5F7F6";
  //resetTransform(ctx);
  for (var row = 0; row < width; row = row + step) {
    ctx.moveTo(0, row);
    ctx.lineTo(width, row);
    ctx.stroke();
  }

  for (var col = 0; col < height; col = col + step) {
    ctx.moveTo(col, 0);
    ctx.lineTo(col, height);
    ctx.stroke();
  }
}

function printLogContext(ctx) {
  (ctx) ? console.log(`Have ctx`): console.log(`Don't habe ctx`);
}

<canvas id="canvasId" style="border: solid"></canvas>