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

Question

我的网站上有一个 Canvas 元素，可以在桌面浏览器和 Android 设备上完美呈现，但不会在 iOS 设备(iPad、iPhone)上呈现 - Safari 和 iOS 上的 Chrome 都不会呈现。我使用 Materialise 作为我的 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(设置>>Safari>>高级)然后连接到 friend 的 Mac PC 来解决这个问题。在 Mac 上使用 Safari，我能够启用 Web Inspector，从而查看 Apple 的开发者工具(设置>>高级>>在菜单栏中显示开发菜单)。

我发现我的 <canvas> 的宽度元素正在归零。这意味着 window.innerWidth要么返回0或 null从而将我的 Canvas 大小调整为零宽度而不是设备的宽度。

这让我尝试使用 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>