1
我有一个简单的HTML5 Web应用程序,它使用javascript创建画布上下文并绘制插入符号(^)的简单图像,然后在CSS类的定义中引用在多个标签上渲染图像。HTML5 IOS WebApp画布不从主屏幕启动时呈现
应用程序显示在浏览器中细:曾尝试谷歌浏览器(Win7的),移动Safari浏览器(iPad的IOS4 & IOS5的iPod(IOS4 & IOS5) 但是,如果在iPad或iPod我 “添加到主屏幕” 和然后启动Web应用程序^ ^图像没有呈现到。
我知道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;
}