canvas 实在是 h5 里的好东西!
收录待用,修改转载已取得腾讯云授权
效果如图:
实现思路:
用到的 API : http://www.w3school.com.cn/tags/html_ref_canvas.asp
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta content="yes"name="apple-mobile-web-app-capable"/>
<meta content="black"name="apple-mobile-web-app-status-bar-style"/>
<meta name="format-detection"content="telphone=no"/>
<title>canvasProgress</title>
</head>
<body>
<canvas id="canvasEl" style="background-color:#000" height="100px" width="100px"></canvas>
</body>
<script type="text/javascript" src="progress.js"></script>
<script type="text/javascript">
var progress = new Progress({element: document.getElementById('canvasEl')})
var n = 0;
var timer = setInterval(function() {
if (n++ !== 100) {
progress.setProgress(n);
} else {
clearInterval(timer);
}
}, 100)
</script>
</html>
Git : https://github.com/vincentlws/canvasProgress
原文来自:https://www.qcloud.com/community/article/762798001489391689
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.