drawGraph（） 函数不起作用 HTML5 Canvas

drawGraph() function not working HTML5 Canvas

提问人：Elsa 提问时间：11/14/2023 更新时间：11/14/2023 访问量：17

问：

我正在尝试使我的drawGraph函数基于先前从输入定义的“nodes”变量运行。当我使用静态值运行 drawGraph（） 函数时，一切运行良好。但是，如果它在值之后调用，则我的画布上不会显示任何内容。我该如何处理这个问题？

JavaScript的


const element = document.querySelector("body");

const style = getComputedStyle(element);

const backgroundColor = style.backgroundColor;
console.log(backgroundColor);

let totalVerticies = [];

// GENERAL FUNCTIONS

// getValVert();

// BUTTTON FUNCTIONS

function openThemeModal() {
  document.getElementById("blur").style.display = "block";
  document.getElementById("modal-cont").style.display = "block";
}

function closeThemeModal() {
  document.getElementById("blur").style.display = "none";
  document.getElementById("modal-cont").style.display = "none";
}

// GRAPH CANVAS

var canvas = document.getElementById("main-canvas");
var ctx = canvas.getContext("2d");

canvas.width = 1000;
canvas.height = 400;

width = canvas.width;
height = canvas.height;

class Node {
  constructor(radius, xpos, ypos, strokeColor, fillColor) {
    this.radius = radius;
    this.xpos = xpos;
    this.ypos = ypos;
    this.strokeColor = strokeColor;
    this.fillColor = fillColor;
  }

  draw() {
    ctx.strokeStyle = this.strokeColor;
    ctx.fillStyle = this.fillColor;
    ctx.beginPath();
    ctx.arc(this.xpos, this.ypos, this.radius, 0, 2 * Math.PI, false);
    ctx.fill();
    ctx.stroke();
  }

  getX() {
    return this.xpos;
  }

  getY() {
    return this.ypos;
  }
}

class Edge {
  constructor(startx, starty, endx, endy, strokeColor) {
    this.startx = startx;
    this.starty = starty;
    this.endx = endx;
    this.endy = endy;
    this.strokeColor = strokeColor;
  }

  draw() {
    ctx.strokeStyle = this.strokeColor;
    ctx.beginPath();
    ctx.moveTo(this.startx, this.starty);
    ctx.lineTo(this.endx, this.endy);
    ctx.stroke();
  }
}

let nodeArray = [];
let edgeArray = [];

function drawGraph(nodeNum, radius) {
  console.log("reached");
  for (i = 0; i < nodeNum; i++) {
    let x = Math.random() * (width - radius * 2) + radius;
    let y = Math.random() * (height - radius * 2) + radius;

    nodeArray.push(new Node(radius, x, y, "white", backgroundColor));
  }
  for (i = 0; i < nodeNum - 1; i++) {
    let sx = nodeArray[i].getX();
    let sy = nodeArray[i].getY();

    let ex = nodeArray[i + 1].getX();
    let ey = nodeArray[i + 1].getY();

    // console.log(sx, sy, ex, ey);

    edgeArray.push(new Edge(sx, sy, ex, ey, "white"));
    // console.log(edgeArray);
  }
}
nodes = totalVerticies.length;

function getValVert() {
  const val = document.querySelector("#verticies").value;
  if (val.length != "") {
    totalVerticies = val.split(",");
    // console.log(totalVerticies.length);
    nodesUpdate();
  }
}

function nodesUpdate() {
  nodes = totalVerticies.length;
  console.log(nodes);
}

function drawMe() {
  drawGraph(nodes, 30);
}

for (i = 0; i < edgeArray.length; i++) {
  edgeArray[i].draw();
}

for (i = 0; i < nodeArray.length; i++) {
  nodeArray[i].draw();
}

[HTML全文]

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Graph Generator</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <div id="contact-info">
        <a href="" id="github">GitHub</a>
        <a href="" id="github">LinkedIn</a>
        <a href="" id="github">TikTok</a>
        <a href="" id="github">More</a>
      </div>
    </header>
    <main>
      <canvas id="main-canvas"></canvas>
      <div id="inputs-cont">
        <div class="input-cont">
          <input
            type="text"
            id="verticies"
            class="main-input"
            onblur="getValVert()"
          />
        </div>
        <button onclick="drawMe()">DRAW</button>
        <div class="input-cont">
          <input type="text" id="edges" class="main-input" />
        </div>
      </div>
      <div id="buttons-cont">
        <button class="personalization-button" id="graph-colors">
          Graph Colors!
        </button>
        <h1>Elsa's Graph Generator</h1>
        <button
          class="personalization-button"
          id="theme-colors"
          onclick="openThemeModal()"
        >
          Theme Colors!
        </button>
      </div>
    </main>
    <div id="blur"></div>
    <div id="modal-cont">
      <div id="modal">
        <button id="close-modal" onclick="closeThemeModal()">X</button>
        <div id="choices-cont">
          <div id="light-mode" class="theme-choice">
            <div id="sun"></div>
            <p class="theme-desc">Light Mode</p>
          </div>
          <div id="dark-mode" class="theme-choice">
            <div id="moon-visible"></div>
            <div id="moon-mask"></div>
            <p class="theme-desc">Dark Mode</p>
          </div>
          <div id="sepia-mode" class="theme-choice">
            <div id="sepia-tri"></div>
            <p class="theme-desc">Sepia Mode</p>
          </div>
          <div id="rainbow-mode" class="theme-choice">
            <div id="rainbow-circle1"></div>
            <div id="rainbow-circle2"></div>
            <div id="rainbow-circle3"></div>
            <div id="rainbow-circle4"></div>
            <div id="rainbow-circle5"></div>
            <div id="rainbow-circle6"></div>
            <div id="rainbow-mask"></div>
            <div id="rainbow-rect"></div>
            <p class="theme-desc" id="rainbow-p">Rainbow</p>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="main.js"></script>
</html>```
JavaScript HTML 图形 HTML5-canvas

评论

0赞 Kaiido 11/14/2023
末尾的两个 for 循环应该在 inside 或 inside 。目前，当两个数组仍然为空时，它们只运行一次，因此不执行任何操作。drawMedrawGraph

答： 暂无答案

上一个：地面未显示在 HTML5 画布游戏中 - JavaScript

下一个：React Three Fiber useRef 关于 Mesh Element 的问题 [已关闭]