Question

<!DOCTYPE html5>
<html>

<head>
  <title>disturbed</title>

  <script>
    window.onload = function() {
      // create the canvas
      var canvas = document.createElement("canvas"),
        c = canvas.getContext("2d");
      var particles = {};
      var particleIndex = 0;
      var particleNum = 15;

      // set canvas size
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      // add canvas to body
      document.body.appendChild(canvas);

      // style the canvas
      c.fillStyle = "black";
      c.fillRect(0, 0, canvas.width, canvas.height);

      function Particle() {
        this.x = canvas.width / 2;
        this.y = canvas.height / 2;
        this.vx = Math.random() * 10 - 5;
        this.vy = Math.random() * 10 - 5;
        this.gravity = 0.3;
        particleIndex++;
        particles[particleIndex] = this;
        this.id = particleIndex;
        this.life = 0;


        this.maxLife = Math.random() * 30 + 60;


        this.color = "hsla(" + parseInt(Math.random() * 360, 10) + ",90%,60%,0.5";
      }

      Particle.prototype.draw = function() {
        this.x += this.vx;
        this.y += this.vy;


        if (Math.random() < 0.1) {
          this.vx = Math.random() * 10 - 5;
          this.vy = Math.random() * 10 - 5;
        }

        this.life++;
        if (this.life >= this.maxLife) {
          delete particles[this.id];
        }

        c.fillStyle = this.color;
        //c.fillRect(this.x, this.y, 5, 10);
        c.beginPath();
        c.arc(this.x, this.y, 2.5, 0, 2 * Math.PI);
        c.fill();
      };

      setInterval(function() {
        //normal setting before drawing over canvas w/ black background
        c.globalCompositeOperation = "source-over";
        c.fillStyle = "rgba(0,0,0,0.5)";
        c.fillRect(0, 0, canvas.width, canvas.height);
        for (var i = 0; i < particleNum; i++) {
          new Particle();
        }

        // c.globalCompositeOperation = "darken";

        for (var i in particles) {
          particles[i].draw();
        }
      }, 30);
    };
  </script>


</head>

<body>
</body>

</html>

下面的代码都是正确的，但是我只想将其密集两个，以使其更容易而不是填充。我想要做的是将我拥有的脚本放入一个单独的文件中，例如“ anything.js”，这样我就可以通过在window.onload =中调用诸如粒子（）之类的主要功能，将其加载到html主文件中。 function（）将在主页上。原因是因为我想将此脚本添加到许多html页面，并且我不想一次又一次将所有冗长的脚本复制到我的代码中。请回答这个问题，这真的很有益。

Answer 1

HTML：

<!DOCTYPE html5>
<html>

<head>
  <title>disturbed</title>   
</head>

<body>

<script src="toto.js" type="text/javascript"></script>
  <script type="text/javascript">
    window.onload = function() {
        Particle();
    };
  </script>
</body>

</html>

toto.js：

//create the canvas
var canvas = document.createElement("canvas"),
c = canvas.getContext("2d");
var particles = {};
var particleIndex = 0;
var particleNum = 15;

// set canvas size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// add canvas to body
document.body.appendChild(canvas);

// style the canvas
c.fillStyle = "black";
c.fillRect(0, 0, canvas.width, canvas.height);

function Particle() {
this.x = canvas.width / 2;
this.y = canvas.height / 2;
this.vx = Math.random() * 10 - 5;
this.vy = Math.random() * 10 - 5;
this.gravity = 0.3;
particleIndex++;
particles[particleIndex] = this;
this.id = particleIndex;
this.life = 0;


this.maxLife = Math.random() * 30 + 60;


this.color = "hsla(" + parseInt(Math.random() * 360, 10) + ",90%,60%,0.5";
}

Particle.prototype.draw = function() {
this.x += this.vx;
this.y += this.vy;


if (Math.random() < 0.1) {
    this.vx = Math.random() * 10 - 5;
    this.vy = Math.random() * 10 - 5;
}

this.life++;
if (this.life >= this.maxLife) {
    delete particles[this.id];
}

c.fillStyle = this.color;
//c.fillRect(this.x, this.y, 5, 10);
c.beginPath();
c.arc(this.x, this.y, 2.5, 0, 2 * Math.PI);
c.fill();
};

setInterval(function() {
//normal setting before drawing over canvas w/ black background
c.globalCompositeOperation = "source-over";
c.fillStyle = "rgba(0,0,0,0.5)";
c.fillRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < particleNum; i++) {
    new Particle();
}

// c.globalCompositeOperation = "darken";

for (var i in particles) {
    particles[i].draw();
}
}, 30);

Answer 2

我看到您遇到范围问题。

变量在脚本之间传递。但是，在您的情况下，您需要在Particle内声明window.onload，以便仅在其中定义它，而不能在其他地方使用它。

将脚本导出到单独文件中的正确方法是在整个脚本的范围内声明Particle，如下所示：

// anything.js
function Particle() {
    ...
}

请注意，您需要进行一些重写，因为我看到您在canvas'内使用了window.onload这样的变量（仅在Particle的范围内定义）的代码。

从html页面中删除js脚本

2 个答案: