Question

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

应用程序在浏览器中显示正常：尝试过Google Chrome（Win7），Mobile Safari（iPad IOS4和IOS5，iPod（IOS4和IOS5））。但如果在iPad或iPod上我“添加到主屏幕”然后启动webapp，则^图像不会渲染到。

我知道HTML5在从主屏幕启动时呈现的方式与在Safari中查看的方式不同，但是我的搜索没有发现任何表明这不起作用的内容。

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

以下代码示例：

**(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;
}

Answer 1

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

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

从主屏幕启动时，HTML5 IOS WebApp画布无法渲染

1 个答案: