Question

我正在运行一个P5实例来创建动画的canvas背景。但是我发现Safari在细节级别上存在问题，当细节太高时，它将完全停止流音频。

这是P5代码：

function sketch(p) {

  let x = 100;
  let y = 100;

  p.setup = function() {

  p.createCanvas( window.innerWidth,  window.innerHeight );   
  p.fill(0);
  p.stroke(2,2,2);
  p.strokeWeight(1);


  };


let t = 0; // time variable


p.draw = function () {

  for (let x = 0; x <=  p.width; x = x + 80 + t) {

    for (let y = 0; y <=  p.height; y = y + 60 + t) {
      // starting point of each circle depends on mouse position
      let xAngle =  p.map( p.mouseX, 0,  p.width, -4 *  p.PI, 4 *  p.PI, true);
      let yAngle =  p.map( p.mouseY, 0,  p.height, -4 *  p.PI, 4 *  p.PI, true);
      // and also varies based on the particle's location
      let angle = xAngle * (x /  p.width) + yAngle * (y /  p.height);

      // each particle moves in a circle
      let myX = x + 60 *  p.cos(2 *  p.PI * t + angle);
      let myY = y + 20 *  p.sin(2 *  p.PI * t + angle);

      p.polygon(myX, myY, 5, 6); 

    }

  }

  t = t + 0.01; // update time
};


p.polygon = function(x, y, radius, npoints) {
  var angle =  p.TWO_PI / npoints;
   p.beginShape();
  for (var a = 0; a <  p.TWO_PI; a += angle) {
    var sx = x +  p.cos(a) * radius;
    var sy = y +  p.sin(a) * radius;
     p.vertex(sx, sy);
  }
   p.endShape( p.CLOSE);
};


};

var myp5 = new p5(sketch, "P5");

所以这行得通，我可以用Javascript添加audio元素，它们可以正常播放。但是，如果我增加屏幕上的形状数量，那么Safari只会拒绝播放任何流音频（但不会产生任何错误）。 Firefox和Chrome不会显示此行为，无论如何它们都会播放音频。

以下更改使Safari出现问题：

for (let x = 0; x <=  p.width; x = x + 30 + t) {

for (let y = 0; y <=  p.height; y = y + 30 + t) {

我假设这是Safari进行的某种内存保护，但是无论如何我都能解决吗？画布绘制看起来似乎并不太紧张，所以我不确定为什么会引起内存问题。

Safari阻止了繁重的画布工作

0 个答案: