javascript - Canvas 元素无法在 iOS 设备上呈现
<p><p>我的网站上有一个 Canvas 元素，可以在桌面浏览器和 Android 设备上完美呈现，但不会在 iOS 设备(iPad、iPhone)上呈现 - Safari 和 iOS 上的 Chrome 都不会呈现。我使用 Materialise 作为我的 CSS 框架。</p>
<p>我需要在我的代码中添加什么吗？</p>
<p> <a href="http://wesleylhandy.net" rel="noreferrer noopener nofollow">Here is live version</a> </p>
<p></p><div class="snippet"data-lang="js"data-hide="false"data-console="true"data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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();</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>main {
position: relative;
}
#canvas {
position: absolute;
top:0;
left:0;
width: 100%;
z-index: 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><main id="#top" role="main">
<canvas id="canvas" width="100%" height = "612px"></canvas>
</main></code></pre>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>我通过在我的 Ipad 上启用 Web Inspector(设置>>Safari>>高级)然后连接到 friend 的 Mac PC 来解决这个问题。在 Mac 上使用 Safari，我能够启用 Web Inspector，从而查看 Apple 的开发者工具(设置>>高级>>在菜单栏中显示开发菜单)。</p>
<p>我发现我的 <code><canvas></code> 的宽度元素正在归零。这意味着 <code>window.innerWidth</code>要么返回<code>0</code>或 <code>null</code>从而将我的 Canvas 大小调整为零宽度而不是设备的宽度。</p>
<p>这让我尝试使用 <code>screen.width</code>反而。这解决了问题。因为我知道 <code>window.innerWidth</code>适用于所有其他设备，我在 <code>navigator.platform</code> 上添加了检查仅在 iOS 设备上使用 screen.width。</p>
<p></p><div class="snippet"data-lang="js"data-hide="false"data-console="true"data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> 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();</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>main {
position: relative;
}
#canvas {
position: absolute;
top:0;
left:0;
width: 100%;
z-index: 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><main id="#top" role="main">
<canvas id="canvas" width="100%" height = "612px"></canvas>
</main></code></pre>
<p style="font-size: 20px;">关于javascript - Canvas 元素无法在 iOS 设备上呈现，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/42700396/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/42700396/
</a>
</p>
页:
[1]