Canvas 元素未在 iOS 设备上呈现

Question

我的网站上有一个画布元素，可以在桌面浏览器和 Android 设备上完美呈现，但不会在 iOS 设备（iPad、iPhone）上呈现 - ios 上的 Safari 和 Chrome 都不会。我使用 Materialise 作为我的 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>

Answer 1

我通过在 Ipad 上启用 Web Inspector（设置>>Safari>>高级）然后连接到朋友的 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
	//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>