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. JavaScript配合button.onclick()使用总结

    Html加载顺序是从上往下加载,如果script中含有引用js脚本,则应该将此script放在head标签里面,这样可是保证此页面都可以引用js脚本内容.如果想在script中设置button.onc ...

  2. MySQL集群(四)之keepalived实现mysql双主高可用

    前面大家介绍了主从.主主复制以及他们的中间件mysql-proxy的使用,这一篇给大家介绍的是keepalived的搭建与使用! 一.keepalived简介 1.1.keepalived介绍 Kee ...

  3. 在 Ubuntu 上安装 MongoDB

    在 Ubuntu 上安装 MongoDB 运行下列命令,导入 MongoDB 公开 GPG 键: sudo apt-key adv --keyserver hkp://keyserver.ubuntu ...

  4. 使用VMware Workstation Pro 12 虚拟机安装Mac OS系统教程 全程图解

    导读:使用虚拟机安装Windows.Linux或者Ubuntu系统大家或许看了很多,但如何使用VMware Workstation Pro 12安装Mac OS,的确需要好好研究一番:否则无法下手,因 ...

  5. E - 今年暑假不AC HDU - 2037

    "今年暑假不AC?"  "是的."  "那你干什么呢?"  "看世界杯呀,笨蛋!"  "@#$%^&* ...

  6. Tomcat的四种基于HTTP协议的Connector性能比较

    Tomcat从5.5版本开始,支持以下四种Connector的配置分别为: <Connector port="8081" protocol="org.apache. ...

  7. spring框架总结(04)----介绍的是Spring中的JDBC模板

    1.1  Jdbc模板概述 它是spring框架中提供的一个对象,是对原始Jdbc API对象的简单封装.spring框架为我们提供了很多的操作模板类,入下图所示: 我们今天的主角在spring-jd ...

  8. php中常用的字符串截取函数mb_substr实例解释

    string mb_substr ( string $str , int $start [, int $length = NULL [, string $encoding = mb_internal_ ...

  9. NOIP2014_day2:无线网络发射器选址

    #include<stdio.h>//NOIP2014 day2 :无线网络发射器选址 ,max=; ][]; void wifi(int a,int b,int c) { int i,j ...

  10. IDE快捷键

    visual studio 中 : /// 快速函数注释 ctrl+k,ctrl+F 格式化代码 Android Studio  中: /**回车 快速函数注释 ctrl+h 查看继承关系 自动格式化 ...