文档章节

html5 canvas实现圆形进度

alertonece
 alertonece
发布于 2015/01/15 17:42
字数 408
阅读 21
收藏 0
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=0">
    <title>圆形进度</title>
    <style>

        body {
            position:absolute;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            background:#FFF;
            width:100%; 
            height:100%;
        }

        #progress{
            position:absolute;
            top:10px;
            right:10px;
            width:100px;
            height:100px;
            display:-webkit-box;
            -webkit-box-pack:center;
              -webkit-box-align:center;
            -webkit-box-orient: vertical;
            display:none;
        }
        
        #txt{
            width:100px;
            height:100px;
            position:absolute;
            top:0;
            left:0;
            display:-webkit-box;
            -webkit-box-pack:center;
              -webkit-box-align:center;
            -webkit-box-orient: vertical;
        }

        .bttn {
            background-color: #EEEEEE;
            border-color: #CCCCCC #CCCCCC #BBBBBB;
            -webkit-border-radius: 4px;
            border-style: solid;
            border-width: 1px;
            color: #333333;
            font: bold 18px;
            padding: 8px 0;
            text-align: center;
            text-shadow: 0 1px 0 #EEEEEE;
            width: 120px;
            margin-top:15px;
        }
    </style>
    <script type="text/javascript">
        
        var tid = 0;
        var process = 0;
        function comitData(){
            progress.reset();
            tid = setInterval(function(){
                process++;
                updatePercent(process);
                if(100 == process){
                    process = 0;
                }
            }, 100);
        }

        function stopData(){
            clearInterval(tid);
        }
        
        //更新进度
        function updatePercent(percent){
              progress.step(percent);
        }
        
    </script>
</head>
<body>
    <div id="progress">
            <canvas id="myCanvas" width="100" height="100"></canvas>
            <div id="txt">
                <div>
                    <font id="per" size="2">0</font>
                    <font size="2">%</font>
                  </div>
                  <div><font size="2">已花费时间</font></div>
                  <div><font id="time" size="2">0s</font></div>
            </div>
        </div>
    <div >
        <div id="main"> 
            <div>
                <div class="bttn" onclick="comitData()" >开始</div>
                <div class="bttn" onclick="stopData()" >停止</div>
            </div>
        </div>   
    </div>
</body>
<script>

    function Progress(){
        this.b = 0;
        this.self = null;
        this.per = null
        this.time = null;
        this.context = null;
        this.init = function(){
            var canvas = document.getElementById('myCanvas');
            this.context = canvas.getContext('2d');
            this.context.clearRect(0, 0, 100, 100);
            this.per = document.getElementById('per');
            this.time = document.getElementById('time');
            this.self = document.getElementById('progress');
        }
        this.reset = function(){
            this.b = new Date().getTime();
            this.time.innerHTML = '0秒'; 
            this.per.innerHTML = '0'; 
            this.self.style.display = 'block';
        }
        this.step = function(process){
            var now = new Date().getTime();
            var step = (now - this.b) / 1000;
            this.time.innerHTML = parseInt(step) + '秒'; 
            this.per.innerHTML = parseInt(process);
            var ctx = this.context; 
            ctx.beginPath();  
            ctx.moveTo(50, 50);  
            ctx.arc(50, 50, 50, 0, Math.PI * 2, false);  
            ctx.closePath();  
            ctx.fillStyle = '#ddd';  
            ctx.fill();  
            ctx.beginPath();  
            ctx.moveTo(50, 50);  
            ctx.arc(50, 50, 50, 0, Math.PI * 2 * process / 100, false);  
            ctx.closePath();  
            ctx.fillStyle = '#e74c3c';  
            ctx.fill();  
            ctx.beginPath();  
            ctx.moveTo(50, 50);  
            ctx.arc(50, 50, 45, 0, Math.PI * 2, true);  
            ctx.closePath();  
            ctx.fillStyle = 'rgba(125,125,125,0.3)';  
            ctx.fill();
            ctx.beginPath();  
            ctx.arc(50, 50, 40, 0, Math.PI * 2, true);  
            ctx.closePath();  
            ctx.strokeStyle = '#ddd';  
            ctx.stroke();
            if(100 == process){
                //do any
            }
        }
    }

    var progress = new Progress();
    progress.init();

</script>
</html>

效果如图:

© 著作权归作者所有

alertonece
粉丝 0
博文 1
码字总数 408
作品 0
郴州
私信 提问
精选9个值得学习的 HTML5 效果【附源码】

这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的...

赵小宾
2014/11/27
0
0
程序猿必备的10款web前端动画插件十三

  1.jQuery圆形旋转切换菜单 带菜单项描述   jQuery有着无数的插件,菜单插件是jQuery插件中最多的,尤其是CSS3和HTML5的配合,让jQuery菜单变得更加丰富多彩。今天我们要给大家分享一款...

爱码农
2018/08/30
0
0
JavaEE——HTML5绘画

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 绘画是HTML5的新功能,以前是没有的,有flash的...

凯哥学堂
2017/10/30
0
0
html5新效果,请各位同事本周学习一下

Twitter“点赞”红心按钮CSS3动画特效 http://www.htmleaf.com/Demo/201508302494.html HTML5 SVG制作滚动变形的半圆形页面头部特效 http://www.htmleaf.com/html5/SVG/201508302493.html H......

hi30059478
2016/02/21
14
0
Mozilla 发布多人 HTML5 游戏 BrowserQuest 及源码

近日,Mozilla 上线了一款支持多人在线的 HTML5 游戏 BrowserQuest ,来展示 HTML5 功能的强大。 该游戏主要使用 HTML5 进行开发,在游戏中,玩家扮演一个年轻的战士,在危险的世界中展开冒险...

墙头草
2012/03/28
5.9K
17

没有更多内容

加载失败,请刷新页面

加载更多

怎么选择数据服务器?请记住这五条

我们应当都知道“数据无价”这个词,既然数据那么主要,选择一款安全稳定的数据服务器是很有必要的,那么如何选择一款牢靠的,稳定的数据服务器呢?我们从五个方面下手,协助您体系的了解数据...

linux-tao
8分钟前
0
0
第一讲:编写TCP Socket小程序

根据下面的步骤编写TCP Socket小程序。注意:作者必须是自己的名字。结果如下: 步骤: 1、用VC建立服务器程序 创建一个win32控制台程序 上面的代码如下,编写代码的时候切换到FileView界面,...

一匹狼工作室
10分钟前
0
0
python-protobuf2uml

首先这篇文章是参考的https://github.com/vak/protobuf2uml 本篇文章都是基于python3的 下面首先我们说一下python3的安装 wget https://github.com/protocolbuffers/protobuf/releases/down...

yiduwangkai
11分钟前
0
0
mysql通过source恢复大表小计

最近迁移一个数据库,500多张表大概600多万条数据,通过navicat导出的数据,再通过source命令导入到mysql8.0 之前也做过类似的工作,但是却从来没有这么慢过,一个小时了还没有完成,之前在笔...

休辞醉倒
12分钟前
0
0
Java、Python、C++、PHP、JavaScript这5大编程语言,我究竟该选哪个?

很多朋友在后台给我留言,问:现在这么多编程语言,Python、Java、PHP、C++、JavaScript等,究竟哪种最流行?我想这应该也是你的困扰吧! 其实他们各有优势,但是对于选择困难的程序员而言,...

Java领航员
28分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部