Javascript HTML5画布闪烁，don'；我不认为缓冲会起作用

现在，我有一个JavaScript函数，它通过24x24网格，在每个位置绘制一个随机颜色。它在Chrome中运行良好，但在Firefox中却有这种可怕的闪烁。现在，通常看起来缓冲区会修复它，但是画布实际上是不可见的，我只是使用

canvas.toDataURL（）将其设置为背景所有方块更新后。有没有想过为什么它不起作用

编辑：

下面是有问题的代码：

  window.onload=function(){
  var canvas = document.getElementById("background"); //canvas is assigned the ID of background
  var canvasBuffer = canvas;
  var ctx = canvas.getContext('2d');

  window.requestAnimFrame = (function (callback) {
      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
          window.setTimeout(callback, 1000 / 30);
      };
  })();


  var fps = 30;
  var ar = 0;
  var ag = 0;
  var ab = 0;
  var br = 0;
  var bg = 0;
  var bb = 0;
  var redmod = .6;
  var greenmod = 1.1;
  var bluemod = 1.2;
  var count = 0;
  var coords = new Array(8);


  //create an 8x8 matrix of value pairs (current value and target value)
  for (var i = 0; i < 24; i++) {
      coords[i] = new Array(8);
      for (var j = 0; j < 24; j++) {
          coords[i][j] = new Array(2);
          coords[i][j][0] = randomColor();
          coords[i][j][1] = randomColor();
          ctx.fillStyle = "#" + coords[i][j][0];        
          ctx.fillRect(i * 20, j * 20, 20, 20);
      }
    }

  function assignToDiv(){ // sets the canvas as the background of two divs
    dataUrl = canvas.toDataURL();
    document.getElementById("intro").style.background='url('+dataUrl+')'
    document.getElementById("nav").style.background='url('+dataUrl+')'
  }

  function animate() {
      setTimeout(function () {
          requestAnimFrame(animate);
          requestAnimFrame(assignToDiv);

          // Drawing code goes here
          // changes the general color over time
          if (count == 256){
              redmod = .4;
              greenmod = .8;
              bluemod = 1;
          }
          else if (count == 512){
              redmod = 1.4;
              greenmod = .8;
              bluemod = .6;
          }
          else if (count == 768){
              redmod = 1.3;
              greenmod = .5;
              bluemod = .6;
          }
          else if (count == 1024){
              redmod = 1.1;
              greenmod = .3;
              bluemod = .5;
          }
          else if (count == 1280){
              redmod = .6;
              greenmod = 1.1;
              bluemod = 1.2;
              count = 0;
          }
          count++;
          //choose 3 squares to change        
          for (var m = 0; m < 3; m++){

              var r = parseInt(Math.random() * 24);
              var c = parseInt(Math.random() * 24);

              coords[c][r][1] = randomColor();
          }
          //update each square
          for (var k = 0; k < 24; k++) {
              for (var l = 0; l < 24; l++) {
                  //make sure all colors are 6 digits long
                  while (coords[k][l][0].length<6){
                      coords[k][l][0]= "0" + coords[k][l][0];
                  }
                  while (coords[k][l][1].length<6){
                      coords[k][l][1]= "0" + coords[k][l][1];
                  }

                  //convert the red, green, and blue values back to dec
                  ar = parseInt(coords[k][l][0].substring(0,2),16);
                  ag = parseInt(coords[k][l][0].substring(2,4),16);
                  ab = parseInt(coords[k][l][0].substring(4,6),16)

                  br = parseInt(coords[k][l][1].substring(0,2),16);
                  bg = parseInt(coords[k][l][1].substring(2,4),16);
                  bb = parseInt(coords[k][l][1].substring(4,6),16);              

                  //move the current color closer to the target color
                  ar = parseInt(ar + (br - ar)/fps);
                  ag = parseInt(ag + (bg - ag)/fps);
                  ab = parseInt(ab + (bb - ab)/fps);
                  //put it pack to hex
                  var RR = ((ar.toString(16).length==1)?"0"+ar.toString(16):ar.toString(16));
                  var GG = ((ag.toString(16).length==1)?"0"+ag.toString(16):ag.toString(16));
                  var BB = ((ab.toString(16).length==1)?"0"+ab.toString(16):ab.toString(16));

                  coords[k][l][0] = RR + GG + BB;

                  ctx.fillStyle = "#" + coords[k][l][0];
                  ctx.fillRect(k * 20, l * 20, 20, 20);
              }
          }


      }, 1000 / fps);
  }

  // create a random color object {red,green,blue}
  function randomColor() {
    var red = Math.floor(Math.random() * 128 * redmod);
    var green = Math.floor(Math.random() * 128 * greenmod);
    var blue = Math.floor(Math.random() * 128 * bluemod);
    var avg = red * .3 + green * .6 + blue * .1;

    red = parseInt(red * .5 + avg * .5);
    green = parseInt(green * .5 + avg * .5);
    blue = parseInt(blue * .5 + avg * .5);

      var redhex = ((red.toString(16).length==1)?"0"+red.toString(16):red.toString(16));
      var greenhex = ((green.toString(16).length==1)?"0"+green.toString(16):green.toString(16));
      var bluehex = ((blue.toString(16).length==1)?"0"+blue.toString(16):blue.toString(16));

      return (redhex + greenhex + bluehex);
  }


  animate();
  assignToDiv();

  }  

您的问题是以60fps的速度替换了2个元素背景。

与其不断地替换“intro”和“nav”的背景，不如在intro和nav下分层画布元素。然后利用这些基础画布。
没有代码很难调试。对于给定（缺少）信息，我唯一的建议是您应该使用requestAnimationFrame：可能与Firefox呈现数据URL或背景图像的方式有关，而不是与画布本身有关。如果您没有亲眼看到画布上发生闪烁，那么问题很可能不在画布上。好的，用代码更新它。我该如何判断它是否在画布上？事实上，@izuriel，它似乎就是这样。我进入调试器，闪烁发生在
document.getElementById（“intro”）.style.background='url（'+dataUrl+'）之后被调用。你知道有什么解决办法吗？很有趣。。。为了澄清，你说的是基本上创建与简介和导航相同大小和形状的画布，然后将它们设置为文本后面？是的……你将有两个画布和两个上下文。您可以对两张“背景”画布执行fillStyle=“#”+coords[k][l][0]和fillRect（k*20，l*20,20,20）。画布可以处理快速重画，而html背景会导致闪烁。
    <canvas id="background" width=480 height=480></canvas>

#background {
display:none;
}