Canvas元素无法在iOS设备上呈现

Question

我的网站上有一个canvas元素，可以在桌面浏览器和Android设备上完美呈现，但不会在iOS设备（iPad，iPhone）上呈现 - 在ios上既不是Safari也不是Chrome。我正在使用Materialize作为我的CSS框架。

我需要在代码中添加一些内容吗？

Here is live version

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>

Answer 1

我通过在Ipad上启用Web Inspector（设置＆gt;＆gt; Safari＆gt;＆gt;高级）然后连接到朋友Mac PC来解决此问题。在Mac上使用Safari，我能够启用Web Inspector，从而查看Apple的开发人员工具（设置＆gt;＆gt;＆gt;＆gt;＆gt;在菜单栏中显示开发菜单）。

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

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

＆＃13;

＆＃13;

    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();

＆＃13;

main {
 position: relative;
}

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;