画布元素不在iOS设备上渲染

我在我的网站上有一个画布元素，它在桌面浏览器和Android设备上完美呈现，但不会在iOS设备（iPad，iPhone）上呈现 - 既不在Safari上，也不在Chrome上呈现IOS。我使用Materialize作为我的CSS框架。画布元素不在iOS设备上渲染

有什么我需要添加到我的代码？

Here is live version

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

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

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

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

 
\t \t function getRandomColor(){ 
 

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

 
\t \t var x = 0; 
 

 
\t \t function paint() { 
 

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

 
\t  } 
 

 
\t \t next = setInterval(paint, 0.05); 
 
\t } 
 

 
\t paintCanvas();

main { 
 
position: relative; 
 
} 
 

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

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

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

来源

2017-03-09 wlh

我通过启用我的iPad（设置>>野生动物园>>高级）Web检查，然后连接到Mac的朋友PC解决了这个问题。在Mac上使用Safari，我可以启用Web Inspector，从而查看Apple的开发者工具（设置>>高级>>在菜单栏中显示开发菜单）。

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

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

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

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

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

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

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

 
\t \t function getRandomColor(){ 
 

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

 
\t \t var x = 0; 
 

 
\t \t function paint() { 
 

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

 
\t  } 
 

 
\t \t next = setInterval(paint, 0.05); 
 
\t } 
 

 
\t paintCanvas();

main { 
 
position: relative; 
 
} 
 

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

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

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

来源

2017-03-11 19:05:53 wlh

画布元素不在iOS设备上渲染

回答

相关问题