Почему не отображается текст, осевые линии и метки

Question

Почему не отображается текст, осевые линии и метки

Рейтинг: 0Ответов: 1Опубликовано: 17.08.2023

let canvas = document.getElementById('tutorial');
let c = canvas.getContext('2d');

let data = [16, 68, 20, 30, 54];
let labels = ["JAN", "FEB", "MAR", "APR", "MAY"];

c.fillStyle = 'grey';
c.fillRect(0, 0, 500, 500);
c.fillStyle = 'blue';

for (let i = 0; i < data.length; i++) {
    let dp = data[i];
    c.fillRect(25 + i * 100, 500 - dp * 5 - 30, 50, dp * 5);
}

c.fillStyle = 'black';
c.lineWidth = 2.0;
c.moveTo(30, 10);
c.lineTo(30, 460);
c.lineTo(490, 460);
c.stroke();

c.fillStyle = 'black';
for (let i = 0; i < 6; i++) {
    c.fillText((5 - i) * 20 + '', 4, i * 80 + 60);
    c.beginPath();
    c.moveTo(25, i * 80 + 60);
    c.lineTo(30, i * 80 + 60);
    c.stroke();
}

for (let i = 0; i < 5; i++) {
    c.fillText(labels[i], i * 100 + 50, 475);
}

c.fillStyle = 'white';
c.fillRect(0, 0, 500, 500);

c.fillStyle = 'blue';
for (let i = 0; i < data.length; i++) {
    let dp = data[i];
    c.fillRect(40 + i * 100, 460 - dp * 5, 50, dp * 5);
}

<canvas id="tutorial" width="500" height="500"></canvas>

javascript canvas

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Все что рисуется в canvas, рисуется поочередно и поверх того, что уже нарисовано.

Вот эти строчки рисуют белый квадрат, поверх уже нарисованных осей и лейблов:

c.fillStyle = 'white';
c.fillRect(0, 0, 500, 500);

Можно разбивать код с отрисовкой отдельных частей на функции, тогда можно было бы вызывать эти функции в определенном, нужном для вас, порядке, выглядело бы это как расположение слоев в графических редакторах.

let canvas = document.getElementById('tutorial');
let c = canvas.getContext('2d');

let data = [16, 68, 20, 30, 54];
let labels = ["JAN", "FEB", "MAR", "APR", "MAY"];

function drawBackground(color) {
  c.fillStyle = color;
  c.fillRect(0, 0, 500, 500);  
}

function drawAxisAndLabels() {
  c.fillStyle = 'black';
  c.lineWidth = 2.0;
  c.moveTo(30, 10);
  c.lineTo(30, 460);
  c.lineTo(490, 460);
  c.stroke();

  c.fillStyle = 'black';
  for (let i = 0; i < 6; i++) {
      c.fillText((5 - i) * 20 + '', 4, i * 80 + 60);
      c.beginPath();
      c.moveTo(25, i * 80 + 60);
      c.lineTo(30, i * 80 + 60);
      c.stroke();
  }

  for (let i = 0; i < 5; i++) {
      c.fillText(labels[i], i * 100 + 50, 475);
  }  
}

function clear() {
  c.fillStyle = 'white';
  c.fillRect(0, 0, 500, 500);
}

function drawData() {
  c.fillStyle = 'blue';
  for (let i = 0; i < data.length; i++) {
      let dp = data[i];
      c.fillRect(40 + i * 100, 460 - dp * 5, 50, dp * 5);
  }
}

//layers
drawBackground('gray');
drawData();
// clear();
drawAxisAndLabels();

<canvas id="tutorial" width="500" height="500"></canvas>

Почему не отображается текст, осевые линии и метки

Ответы