Линии холста не остаются при рисовании из другой функции

Я не могу понять, почему мои линии не рисуются. Я пытаюсь объединить 2 «рисунка».

  • Сетка (рисует отлично).
  • Еще пару линий (тоже отлично рисую).

Но когда я комбинирую 2, я теряю свои линии или они «кажутся» не нарисованными.

*Обратите внимание, что у меня есть 2 функции, каждая из которых получает контекст. Опять же, одно я могу нарисовать, а другое нет (на холсте они не сочетаются). Кроме того, прочитав еще один вопрос StackOverflow, на который ответили, добавив beginPath(), без разницы. И этот бесполезен.

Что я упускаю/делаю не так?

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>


javascript canvas
person Tinkle Pooplebottham    schedule 15.11.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Он отлично рисует обе функции.

Проблема в том, что черная ось перезаписывается светло-синей сеткой.

Если вы измените порядок функций, вы также увидите ось.

(вы также должны использовать # при определении цвета, даже черного)

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>

person Gabriele Petrioli    schedule 15.11.2016
comment
Боже, я чувствую себя глупо. Если вы посмотрите, я пытался сделать это в правильном порядке. Я прокомментировал это после. Я думал, что у меня есть этот знак #. Фейспалм! Спасибо за ваши глаза! - person Tinkle Pooplebottham; 16.11.2016
comment
Продолжите, если сможете... Есть ли способ, чтобы черные линии всегда были на месте (без использования изображения или порядка, в котором оно размещено)? - person Tinkle Pooplebottham; 16.11.2016
comment
@TinklePooplebottham, я бы не знал, потому что я использую холст только для простых вещей. Хотя кажется, что перенос каждой строки (в двух циклах) в ctx.beginPath() и ctx.closePath() позволит просвечивать ось (она частично перезаписана), но я не могу объяснить, почему. .. - person Gabriele Petrioli; 16.11.2016
comment
Нет проблем, у меня есть несколько идей в голове, и мне нужно немного поэкспериментировать с сохранением/восстановлением контекста. Я ценю не меньше. - person Tinkle Pooplebottham; 16.11.2016