如何使 function 只运行一次？

Question

我想在 canvas 上呈现固定数量的圆圈（在本例中为 10 个），并带有一条从一侧到另一侧的移动线，圆圈 function 会为每一帧触发循环 ZC1C425268E68385D1AB5074C1 从这种方式运行到 stop414 行为。 我什至不确定我是否通过让圆圈射击一次来思考是否正确。

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

fetch("http://api.open-notify.org/astros.json")
  .then((res) => res.json())
  .then((data) => {
    var x = 0;
    var s = 1;
    function circles() {
      for (var i = 0; i < data.number; i++) {
        let randW = Math.floor(Math.random() * (290 - 10) + 10);
        let randH = Math.floor(Math.random() * (140 - 10) + 10);
        ctx.beginPath();
        ctx.fillStyle = "red";
        ctx.arc(randW, randH, 5, 0, 2 * Math.PI);
        ctx.fill();
        ctx.beginPath();
      }
    }
    function draw() {
    //   ctx.clearRect(0, 0, canvas.width, canvas.height); // // use with setInterval(draw,10)
      circles();
      ctx.fill();
      ctx.beginPath();
      ctx.moveTo(x, 0);
      ctx.lineTo(x, canvas.height);
      x += s;
      ctx.strokeStyle = "white";
      ctx.stroke();
      if (x == canvas.width || x == 0) {
        s = s * -1;
      }
    }
    // setInterval(draw, 10);
    function loop() {
        ctx.clearRect(0,0,canvas.width, canvas.height);
        draw();
        requestAnimationFrame(loop);
    }
    requestAnimationFrame(loop);
  });

Answer 1

请使用 2 个不同的 canvas 元件检查方法并单独使用绘图功能：

 const canvas = document.querySelector(".canvas-1"); const ctx = canvas.getContext("2d"); const canvas2 = document.querySelector(".canvas-2"); const ctx2 = canvas2.getContext("2d"); // fetch("http://api.open-notify.org/astros.json") //.then((res) => res.json()) //.then((data) => { const data = JSON.parse('{"message": "success", "people": [{"name": "Mark Vande Hei", "craft": "ISS"}, {"name": "Pyotr Dubrov", "craft": "ISS"}, {"name": "Anton Shkaplerov", "craft": "ISS"}, {"name": "Zhai Zhigang", "craft": "Shenzhou 13"}, {"name": "Wang Yaping", "craft": "Shenzhou 13"}, {"name": "Ye Guangfu", "craft": "Shenzhou 13"}, {"name": "Raja Chari", "craft": "ISS"}, {"name": "Tom Marshburn", "craft": "ISS"}, {"name": "Kayla Barron", "craft": "ISS"}, {"name": "Matthias Maurer", "craft": "ISS"}], "number": 10}'); var x = 0; var s = 1; function circles() { for (var i = 0; i < data.number; i++) { let randW = Math.floor(Math.random() * (290 - 10) + 10); let randH = Math.floor(Math.random() * (140 - 10) + 10); ctx.beginPath(); ctx.fillStyle = "red"; ctx.arc(randW, randH, 5, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); } } function draw() { // ctx.clearRect(0, 0, canvas.width, canvas.height); // // use with setInterval(draw,10) // circles(); ctx2.fill(); ctx2.beginPath(); ctx2.moveTo(x, 0); ctx2.lineTo(x, canvas.height); x += s; ctx2.strokeStyle = "white"; ctx2.stroke(); if (x == canvas2.width || x == 0) { s = s * -1; } } circles(); function loop() { ctx2.clearRect(0,0,canvas.width, canvas.height); draw(); requestAnimationFrame(loop); } loop();

 canvas { height: 500px; width: 500px; border: solid 1px; background: rgba(0, 0, 0, 0.1); position: absolute; }

 <canvas class="canvas-1"></canvas> <canvas class="canvas-2"></canvas>