畫布元素不在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設備上渲染

回答

相關問題