JS 粒子（星星）在 chrome 但不是 firefox 中工作

Question

我制作了一些随机闪烁的星形粒子，但由于某种原因它在 Firefox 上没有运行，我可以渲染我的图像，但星星没有渲染。我也没有错误信息。

我把它发给了一个朋友，出于某种原因，它在他的 chrome 浏览器中也不起作用，但在我的 chrome 浏览器上它起作用了，只是火狐浏览器不行，我完全无能为力，因为我在任何一个浏览器中都没有错误报告。将不胜感激 :)

作为旁注，我渲染图像只是为了表明出于某种原因它们会渲染而不是星星，通常我会有一个数组和几个 for 循环，但现在我想获取星星渲染。谢谢。

编辑：我只在我提到的这两个浏览器中进行了测试。

  var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d");

  var stars = [],
      numberOfStars = 200,
      state = "town",
      tileMap = new Image();

  tileMap.src = "images/tileMap.png";

  function Star() {
    this.x = Math.random() * window.innerWidth;
    this.y = Math.random() * window.innerHeight;
    this.size = Math.random() * 3;
    this.alpha = Math.random();
    this.counter = 0;
    this.draw = function() {
      this.counter++;

      if (this.counter == 10) {
        var decrease = false;

        //check the brightness
        if(this.alpha >= 1) {
          decrease = true;
        } else if (this.alpha <= 0) {
          decrease = false;
        }

        //change brightness
        if(decrease) {
          this.alpha = 0.4;
        } else {
          this.alpha += 0.1;
        }

        //reset counter
        this.counter = 0;
      }

      //draw star
      context.fillStyle = "rgba(255,255,255," + this.alpha + ");";
      context.fillRect(this.x, this.y, this.size, this.size);
    }
  }

  function loop() {
    //que next frame
    window.requestAnimationFrame(loop);

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

    //clear screen, set black background
    context.fillStyle = "black";
    context.fillRect(0, 0, window.innerWidth, window.innerHeight);

    //add stars
    for(i = 0; i < stars.length; i++) {
      stars[i].draw();

    //draw relavent map
    context.drawImage(tileMap, 64, 64, 64, 128);
    context.drawImage(tileMap, 64*2, 64, 64, 128);
    context.drawImage(tileMap, 64*3, 64, 64, 128);
    context.drawImage(tileMap, 64, 64*2, 64, 128);
    context.drawImage(tileMap, 64*2, 64*2, 64, 128);
    context.drawImage(tileMap, 64*3, 64*2, 64, 128);
    }
  }

  window.onload = function() {
    //create stars
    for (i = 0; i < numberOfStars; i++) {
      stars.push(new Star);
    }

    //request first frame
    window.requestAnimationFrame(loop);

    console.log("running...");
  }

Answer 1

颜色字符串不是命令，所以删除 ;

更正：

context.fillStyle = "rgba(255,255,255," + this.alpha + ");";

为此：

context.fillStyle = "rgba(255,255,255," + this.alpha + ")";

JS 粒子（星星）在 chrome 但不是 firefox 中工作

JS particles (stars) working in chrome but not firefox

html

javascript

firefox

google-chrome

particles