HTML5 Canvas + JS 无法在 IOS/Safari 上运行

Question

我实现了一个带有 javascript 粒子效果的画布元素。该效果适用于除 IOS/Safari 之外的所有浏览器。我做了一些研究，IOS/Safari 支持 HTML5/Canvas：根据 HTML5/Canvas 的浏览器支持图表

$(function() {
  var WIDTH = window.innerWidth * .9,
    HEIGHT = window.innerHeight,
    MAX_PARTICLES = 100,
    DRAW_INTERVAL = 60,
    canvas = document.querySelector('#pixies'),
    context = canvas.getContext('2d'),
    gradient = null,
    pixies = new Array();

  function setDimensions() { 
    WIDTH = window.outerWidth;
    HEIGHT = window.innerHeight;
    canvas.width = WIDTH; 
    canvas.height = HEIGHT; 
  }

  setDimensions();
  window.addEventListener('resize', setDimensions);

  function Circle() {
    this.settings = {ttl:8000, xmax:5, ymax:2, rmax:10, rt:1, xdef:960, ydef:540, xdrift:4, ydrift: 4, random:true, blink:true};

    this.reset = function() {
      this.x = (this.settings.random ? WIDTH*Math.random() : this.settings.xdef);
      this.y = (this.settings.random ? HEIGHT*Math.random() : this.settings.ydef);
      this.r = ((this.settings.rmax-1)*Math.random()) + 1;
      this.dx = (Math.random()*this.settings.xmax) * (Math.random() < .5 ? -1 : 1);
      this.dy = (Math.random()*this.settings.ymax) * (Math.random() < .5 ? -1 : 1);
      this.hl = (this.settings.ttl/DRAW_INTERVAL)*(this.r/this.settings.rmax);
      this.rt = Math.random()*this.hl;
      this.settings.rt = Math.random()+1;
      this.stop = Math.random()*.2+.4;
      this.settings.xdrift *= Math.random() * (Math.random() < .5 ? -1 : 1);
      this.settings.ydrift *= Math.random() * (Math.random() < .5 ? -1 : 1);
    }

    this.fade = function() {
      this.rt += this.settings.rt;
    }

    this.draw = function() {
      if(this.settings.blink && (this.rt <= 0 || this.rt >= this.hl)) {
          this.settings.rt = this.settings.rt*-1;
      } else if(this.rt >= this.hl) {
          this.reset();
      }

      var newo = 1-(this.rt/this.hl);
      context.beginPath();
      context.arc(this.x, this.y, this.r, 0, Math.PI*2, true);
      context.closePath();

      var cr = this.r*newo;
      gradient = context.createRadialGradient(this.x, this.y, 0, this.x, this.y, (cr <= 0 ? 1 : cr));
      gradient.addColorStop(0.0, 'rgba(255,255,255,'+newo+')');
      gradient.addColorStop(this.stop, 'rgba(255,255,255,'+(newo*.6)+')');
      gradient.addColorStop(1.0, 'rgba(255,255,255,0)');
      context.fillStyle = gradient;
      context.fill();
    }

    this.move = function() {
      this.x += (this.rt/this.hl)*this.dx;
      this.y += (this.rt/this.hl)*this.dy;
      if(this.x > WIDTH || this.x < 0) this.dx *= -1;
      if(this.y > HEIGHT || this.y < 0) this.dy *= -1;
    }

    this.getX = function() { return this.x; }
    this.getY = function() { return this.y; }
  }

  for (var i = 0; i < MAX_PARTICLES; i++) {
    pixies.push(new Circle());
    pixies[i].reset();
  }

  function draw() {
    context.clearRect(0, 0, WIDTH, HEIGHT);
    for(var i = 0; i < pixies.length; i++) {
      pixies[i].fade();
      pixies[i].move();
      pixies[i].draw();
    }
  }

  setInterval(draw, DRAW_INTERVAL);
});

#particles {
  position: absolute;
  background: navy;
  width: 200px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="particles">
   <canvas id="pixies"></canvas>
</div>

有什么想法为什么这在 IOS/Safari 中不起作用吗？有问题的实际网站是这个：www.pjmaskslive.com

Answer 1

问题似乎是上述网站上的画布元素宽度设置为 0。所以我假设问题是在开始时设置

WIDTH

变量。这可能是由于 iOS 10 的持续错误所致，如this问题中所述。

另一种方法可能是使用

document.body.getBoundingClientRect().width

作为

window.innerWidth

和/或

window.outerWidth

的替代品。也可以使用

screen.width

，但是，这些也可能与您之前的方法存在相同的问题。

看起来像是 safari 问题，而不是你的代码问题！

Answer 2

if (/iPad|iPhone|iPod|MacIntel/.test(navigator.platform)) { 常量最大宽度 = 5400; // 最大宽度 canvas.width = Math.min(maxWidth, document.body.getBoundingClientRect().width || window.innerWidth || screen.width); 常量纵横比=图像.宽度/图像.高度; 画布.高度=画布.宽度/纵横比;

        document.querySelector('.devicename').innerHTML =
            `${navigator.platform}\s
            width ${canvas.width} height: ${canvas.height}\s 
            image height: ${image.height} image width: ${image.width}\s 
            device height: ${window.innerHeight || screen.height} width : ${window.innerWidth || screen.w

if (/iPad|iPhone|iPod|MacIntel/.test(navigator.platform)) {
  const maxWidth = 5400; // Maximum width
  canvas.width = Math.min(maxWidth, document.body.getBoundingClientRect().width || window.innerWidth || screen.width);
  const aspectRatio = image.width / image.height;
  canvas.height = canvas.width / aspectRatio;

  document.querySelector('.devicename').innerHTML =
    `${navigator.platform}\s
                width ${canvas.width} height: ${canvas.height}\s 
                image height: ${image.height} image width: ${image.width}\s 
                device height: ${window.innerHeight || screen.height} width : ${window.innerWidth || screen.width}`;
}


ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

idth}`； }

    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);