iOS设备上的Canvas元素无法渲染

Question

我在我的网站上有一个画布元素，它在桌面浏览器和安卓设备上都能完美渲染，但在iOS设备（iPad，iPhone）上无法渲染 - 无论是Safari还是Chrome。 我正在使用Materialize作为我的CSS框架。

我的代码需要添加什么吗？

这里是实时版本

var next; //initialize for interval
 //paint random colored pattern on profile screen
 function paintCanvas() {

  const c = document.querySelector("#canvas");
  const ctx = c.getContext("2d");
  c.width = window.outerWidth;

  const width = c.width;
  const height = 612; //canvas height

  const min = 0;
  const max = width;
  const yMid = height/2;
  var y1 = yMid;
  var y2 = yMid;

  function getRandomColor(){

   let r = Math.floor(Math.random()*256);
   let g = Math.floor(Math.random()*256);
   let b = Math.floor(Math.random()*256);
   let color = `rgba(${r}, ${g}, ${b}, 0.5)`;
   return color;
  }

  var x = 0;

  function paint() {

   if (x==(max/2)-2) {
    clearInterval(next);
   }
   ctx.lineWidth = 4; //sets width of line 
      ctx.strokeStyle = getRandomColor(); //assigns random color
      ctx.beginPath(); //start line
      ctx.moveTo(x,y1); //moves the origin
      ctx.lineTo(max-x,y2); //go to the bottom right corner
    ctx.moveTo(x, y2);
    ctx.lineTo(max-x, y1);
      ctx.stroke();
      
      if(y1==0) {
       x++;
      } else {
       y1--;
       y2++;
      }

     }

  next = setInterval(paint, 0.05);
 }

 paintCanvas();

main {
 position: relative;
}

#canvas {
 position: absolute;
 top:0;
 left:0;
 width: 100%;
 z-index: 0;
}

<main id="#top" role="main">

  <canvas id="canvas" width="100%" height = "612px"></canvas>
  
</main>

- wlh

Answer 1

我通过在我的iPad上启用Web Inspector（设置>> Safari>>高级），然后连接到朋友的Mac PC来解决了这个问题。使用Mac上的Safari，我能够启用Web Inspector，从而查看苹果的开发工具（设置>>高级>>在菜单栏中显示开发菜单）。

我发现我的元素的宽度返回为零。这意味着window.innerWidth要么返回0，要么返回null，因此将我的画布调整为零宽度而不是设备的宽度。

这导致我尝试改用screen.width。这解决了问题。由于我知道window.innerWidth适用于所有其他设备，因此我添加了一个检查navigator.platform，仅在iOS设备上使用screen.width。

    var next; //initialize for interval
 //paint random colored pattern on profile screen
 function paintCanvas() {

  const c = document.querySelector("#canvas");
  const ctx = c.getContext("2d");
  
        //____________________________________________
        // ----------- FIX FOR THIS PROBLEM ----------
        //____________________________________________

        if ( navigator.platform != "iPad" && navigator.platform != "iPhone" && navigator.platform != "iPod" ) {
      c.width = window.outerWidth; 
            //I'll use window.innerWidth in production
     } else {
      c.width = screen.width;
     }

  const width = c.width;
  const height = 612; //canvas height

  const min = 0;
  const max = width;
  const yMid = height/2;
  var y1 = yMid;
  var y2 = yMid;

  function getRandomColor(){

   let r = Math.floor(Math.random()*256);
   let g = Math.floor(Math.random()*256);
   let b = Math.floor(Math.random()*256);
   let color = `rgba(${r}, ${g}, ${b}, 0.5)`;
   return color;
  }

  var x = 0;

  function paint() {

   if (x==(max/2)-2) {
    clearInterval(next);
   }
   ctx.lineWidth = 4; //sets width of line 
      ctx.strokeStyle = getRandomColor(); //assigns random color
      ctx.beginPath(); //start line
      ctx.moveTo(x,y1); //moves the origin
      ctx.lineTo(max-x,y2); //go to the bottom right corner
    ctx.moveTo(x, y2);
    ctx.lineTo(max-x, y1);
      ctx.stroke();
      
      if(y1==0) {
       x++;
      } else {
       y1--;
       y2++;
      }

     }

  next = setInterval(paint, 0.05);
 }

 paintCanvas();

main {
 position: relative;
}

#canvas {
 position: absolute;
 top:0;
 left:0;
 width: 100%;
 z-index: 0;
}

<main id="#top" role="main">

  <canvas id="canvas" width="100%" height = "612px"></canvas>
  
</main>

- wlh