主页 / 问题 / 1536349
Accepted
Leks
Asked:2023-08-17 18:13:19 +0000 UTC2023-08-17 18:13:19 +0000 UTC

为什么文本、中心线和标签不显示

  • 772

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

1 个回答

  1. Best Answer

    绘制的所有内容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>

    • 0

相关问题