html代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

     </head>

     <body>

         <canvas id="pro" width="400" height="300"></canvas>

     </body>

 </html>

js代码：

第一步：

var c=document.getElementById("pro"),

                    pro=0,

                    ctx=c.getContext("2d");

                    //画灰色的圆

                    ctx.beginPath();

                    ctx.arc(200,200,190,0,Math.PI*2);

                    ctx.closePath();

                    ctx.fillStyle='#e3eaf2';

                    ctx.fill();

效果图如下：

第二步：

function drawCricle(ctx,percent){

                        //画进度环

                        ctx.beginPath();

                        ctx.moveTo(200,200);

                        ctx.arc(200,200,190,Math.PI*0.8,Math.PI*(0.8+2*percent/200));

                        ctx.closePath();

                        ctx.fillStyle='#ff4b88';

                        ctx.fill();

                        //画内填充圆

                        ctx.beginPath();

                        ctx.arc(200,200,175,0,Math.PI*2);

                        ctx.closePath();

                        ctx.fillStyle='#fff';

                        ctx.fill();

                    }

drawCricle(ctx,60);//执行这个函数

效果图如下：

第三步：让它动起来

function animate(){

                        requestAnimationFrame(function(){

                            pro=pro+1;

                            drawCricle(ctx,pro);

                            if(pro<60){

                                animate();

                            }

                        });

                    }

如果需加入百分比文字：

//将这段代码加到drawCricle函数里面

ctx.font = "bold 20pt Microsoft YaHei";

                ctx.fillStyle = '#333';

                ctx.textAlign = 'center';

                ctx.textBaseline = 'middle';

                ctx.moveTo(200, 200);

                ctx.fillText(process + '%', 200, 200);

效果如下：

完整代码如下：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         <canvas id="pro" width="400" height="400"></canvas>

         <script>

             (function(){

                 var c=document.getElementById("pro"),

                     pro=0,

                     ctx=c.getContext("2d");

                     //画灰色的圆

                     ctx.beginPath();

                     ctx.arc(200,200,80,0,Math.PI*2);

                     ctx.closePath();

                     ctx.fillStyle='#f6f6f6';

                     ctx.fill();

                     function animate(){

                         requestAnimationFrame(function(){

                             pro=pro+1;

                             drawCricle(ctx,pro);

                             if(pro<60){

                                 animate();

                             }

                         });

                     }

                     function drawCricle(ctx,percent){

                         //画进度环

                         ctx.beginPath();

                         ctx.moveTo(200,200);

                         ctx.arc(200,200,80,Math.PI*0.8,Math.PI*(0.8+2*percent/200));

                         ctx.closePath();

                         ctx.fillStyle='#ff9600';

                         ctx.fill();

                         //画内填充圆

                         ctx.beginPath();

                         ctx.arc(200,200,75,0,Math.PI*2);

                         ctx.closePath();

                         ctx.fillStyle='#fff';

                         ctx.fill();

                           //填充文字

                         ctx.font = "bold 20pt Microsoft YaHei";

                         ctx.fillStyle = '#333';

                         ctx.textAlign = 'center';

                         ctx.textBaseline = 'middle';

                         ctx.moveTo(200, 200);

                         ctx.fillText(pro + '%', 200, 200);

                     }

                     animate();

             }())

         </script>

     </body>

 </html>

使用canvas实现环形进度条的更多相关文章

  1. html5 canvas绘制环形进度条，环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

  2. Canvas实现环形进度条

    Canvas实现环形进度条 直接上代码: <canvas width="200" height="200" >60%</canvas> ...

  3. canvas绘制环形进度条

    <!DOCTYPE html> <html > <head> <meta http-equiv="content-type" conten ...

  4. canvas 绘制环形进度条

    结果: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...

  5. canvas环形进度条

    <style> canvas { border: 1px solid red; margin: 100px; }</style> <canvas id="rin ...

  6. 【css】如何实现环形进度条

    最近团队的童鞋接到了一个有关环形进度条的需求,想要还原一个native的沿环轨迹渐变进度条的效果,看到这个效果的时候,笔者陷入了沉思.. 环形进度条的效果,最先想到的就是使用CSS利用两个半圆的hac ...

  7. 环形进度条的实现方法总结和动态时钟绘制（CSS3、SVG、Canvas）

    缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...

  8. canvas实现半圆环形进度条

    html部分 <canvas id="canvas" width="150" height="150"> <p>抱歉 ...

  9. 用初中数学知识撸一个canvas环形进度条

    周末好,今天给大家带来一款接地气的环形进度条组件vue-awesome-progress.近日被设计小姐姐要求实现这么一个环形进度条效果,大体由四部分组成,分别是底色圆环,进度弧,环内文字,进度圆点. ...

随机推荐

  1. 《Java从入门到放弃》JavaSE入门篇：网络编程(入门版)

    要进行网络编程,首先要搞清楚目的是什么. 网络编程说简单点就是在网络上的计算机进行数据的交互. 既然要进行数据交互,那就需要有一个发送方和一个接受方. 按网络上的说法,就是一个攻一个受· 当然,现阶段 ...

  2. 翻译连载 | 第 9 章：递归（下）－《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  3. 使用jquery的方法和技巧2，点击多选框的jquery响应

    使用jquery来控制多选框的变化 功能描述: 1.第一层 当选中后台应用(App1)时,所有多选框都被选择. 当取消选中后台应用(App1)时,所有多选框都被取消选择. 第一层的逻辑如下: 2.第二 ...

  4. mybatis错误——java.io.IOException: Could not find resource com/xxx/xxxMapper.xml

    在学习Mybatis的时候,参考网上的教程进行简单demo的搭建,配置的没有问题,然后出现了下面的错误! Exception in thread "main" java.lang. ...

  5. 分享基于分布式Http长连接框架--设计模型

    追求简单的设计. 也许你的设计功能很强大,但能够在满足你需求的前提下尽量简单明了设计. 当你的设计过于复杂的时候想想是不是有其它路可以走,你站在别人的角度想下,如果别人看了你的设计会不会心领神会,还是 ...

  6. bzoj2118（加法原理）（墨墨的等式）

    题目大意:给定n个物品,每个物品有一个非负价值,问[L,R]区间内有多少价值可以被凑出来. 题意网上一大片,具体求解过程是利用了加法原理,将各个模数拥有的个数之和相加. 就是说随机取一个数a[k],那 ...

  7. 重学C语言---01概述

    1.什么是C语言 C语言是一种计算机程序设计语言,它既具有高级语言的特点,又具有汇编语言的特点.计算机语言是从第二次世界大战以后,经历了戏剧性的发展过程.从机器语言到汇编语言和高级语言.C语言是与硬件 ...

  8. Ubuntu Docker 版本的更新与安装

    突然发现自己的docker 版本特别的低,目前是1.9.1 属于古董级别的了,想更新一下最新版本,这样最新的一下命令就可以被支持.研究了半天都没有更新成功,更新后的版本始终都是1.9.1 :蒙圈了,找 ...

  9. ESLint可共享配置发布，团队自定义ESLint规则新鲜出炉

    ESLint于2013年6月份推出,至今4个年头,最新版本v4.8.0.它是目前主流的用于Javascript和JSX代码规范检查的利器,很多大公司比如Airbnb和Google均有一套自己的Java ...

  10. 简单Elixir游戏服务器-安装Elixir

    用WebInstaller 安装半天也没下载成功文件. 改成直接下载erlang 和 elixir 预编译包了. 安装很简单,最后设置好环境变量. cmd 执行 elixir -v 最后顺便下载了个g ...