Question

我无法理解为什么我的线条没有绘制。我试图将2＆＃39;图纸结合起来。

一个网格（画得非常好）。
其他几行（也画得很好）。

但是当我把2组合在一起时，我会丢失线条，或者他们看起来并没有这么做。得到了。

*请注意，我有2个函数，每个函数都获取上下文。再一次，我可以画一个，但不能画另一个（它们不能在画布上合并）。另外，阅读另一个StackOverflow问题，通过添加一个beginPath（）来回答，没有区别。 this one没用。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

这两个功能都很好。

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

如果更改功能的顺序，您也会看到轴。

（在定义颜色时也必须使用{'1': 'Value1', '2': 'Value2', '3': 'Value3'} {} {} {}，甚至是黑色）

＆＃13;

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

＆＃13;

从另一个函数绘制时，画布线不会停留

1 个答案: