从主屏幕启动时不呈现 HTML5 IOS WebApp 画布答案

【问题标题】：HTML5 IOS WebApp canvas not rendering when launched from homescreen从主屏幕启动时不呈现 HTML5 IOS WebApp 画布
【发布时间】：2011-10-30 07:57:42
【问题描述】：

我有一个简单的 HTML5 webapp，它使用 javascript 创建画布上下文并绘制一个插入符号 (^) 的简单图像，然后在 CSS 类的定义中引用该图像以在多个标签上呈现图像。

应用程序在浏览器中显示良好：尝试过 Google Chrome (Win7)、Mobile Safari (iPad IOS4 & IOS5、iPod (IOS4 & IOS5)。但如果在 iPad 或 iPod 上我“添加到主屏幕”然后启动 web 应用程序，^ 图像不会呈现到 .

我知道从主屏幕启动 HTML5 与在 Safari 中查看时呈现 HTML5 的方式存在差异，但我的搜索没有发现任何表明这不应该工作的东西。

如果有人可以为我阐明这一点，我将不胜感激。

下面的代码示例：

**(index.html)**
<html>
<head>
    <link rel="stylesheet" href="styles/main.css" >
    <script src="scripts/main.js"></script>
</head>
<body>
  <div class="scoreboard-item-wrapper">
    <div class="scoreboard-item">
        <div class="box" ><button id="btn_homegoalup" class="up" onclick="incAction(true,true)"></button>
        </div>
    </div>
  </div>
</body>
</html>

**(main.js)**
initChevronUp("chevron-up", "hsl(228, 1%, 50%)");

function initChevronUp(id, style) {
   var context = document.getCSSCanvasContext("2d", id, 22, 13);

    context.save();
    context.translate(4,0);
    context.clearRect(0, 0, 20, 13);
    context.strokeStyle = style;
    context.lineWidth = 3;

    context.beginPath();
    context.moveTo(1, 9);
    context.lineTo(6.5, 1);
    context.lineTo(12, 9);
    context.stroke();

    context.restore();
}

**(main.css)**

.scoreboard-item .box button.up{
    background:
        -webkit-gradient(linear,left top, left bottom,
            from(rgba(255, 255, 255, .25)), to(transparent) ),    
        -webkit-canvas(chevron-up) center center no-repeat transparent;
}

【问题讨论】：

标签： ios html web-applications canvas

【解决方案1】：

尝试编写 CSS 和 javascript 文件的完整 URL。

您拥有的相对路径是让 safari 在本地查找文件。

【讨论】：