Question

我已经设置了代码，但是在这里输入代码，我想将矩形更改为圆形，但是当我将rect（）更改为arc（）时，代码将不起作用。我添加了方法c.arc（this.x，this.y，10,0,2 * Math.PI）然后是笔触（）方法，但结果输出消失。如果您可以更改形状并自定义代码，那将真的很有帮助

<!DOCTYPE html5>
<html>

<head>
  <title>GLOOMY</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);
      };

      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>
  <canvas>
  
  </canvas>
</body>

</html>

Answer 1

首先：HTML中不需要画布元素，因为画布是在JS中动态创建的。

第二：您添加了arc方法，但也许您忘记添加c.fill（）;。

 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);
    };

body{margin:0; padding:0}

我希望这会有所帮助。

更改画布中动画的形状

1 个答案: