通过定义一个canvas标签， new方法传进ID值，和旋转角度值，即可生成圆形进度条

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>圆进度条</title>

</head>

<body>

    <canvas id="yuan" width="200" height="200"></canvas>

</body>

<script src="jquery-1.11.1.min.js"></script>

<script type="text/javascript">

    window.chart =function(ID){

        var canvas = document.getElementById(ID);

        var ctx = canvas.getContext("2d");

        // 画布宽高

        var W = canvas.width;

        var H = canvas.height;

         //度角

         var degrees = 0;

         var new_degrees = 0;

         // 差额

         var difference = 0;

         var text,text_w;                   // 文字

         var R =W < H ? W:H;             //先默认环半径为canvas宽度

         var outW =parseInt(R / 14);        //环宽度

         var outR = (R/2) -outW;           //环半径=canvas宽度半径 -外环宽度

         var $this = this;

         console.log("canvas宽度:"+R);

         console.log(outW);

         console.log(outR);

         $this.ratePieNoAnimation = function (number){

             degrees =360*number/100;

             // 园弧底图

             ctx.clearRect(0,0,W,H);//先清画布

             ctx.beginPath();

             ctx.strokeStyle ="green";

            // 园弧线的宽度

             ctx.lineWidth = outW;

             ctx.arc(W / 2, H / 2, outR, 0, Math.PI * 2, false);

             ctx.stroke();

            //圆弧动画

            var r = degrees * Math.PI / 180;

            ctx.beginPath();

            ctx.strokeStyle = "#994746";

            ctx.lineWidth = outW;

            // 弧将从最顶端开始

            ctx.arc(W / 2, H / 2, outR, 0 - 90 * Math.PI / 180, r - 90 * Math.PI / 180, false);

            ctx.stroke();

            // 文字添加

            ctx.fillStyle = "#63d2ef";

            ctx.shadowColor = "#eee";

            ctx.font = "bold " + R / 6 + "px hanyi";

            text = Math.floor(degrees / 360 * 100) + "%";

            text_w = ctx.measureText(text).width;

            ctx.fillText(text, W / 2 - text_w / 2, H / 2 + R / 10);

        };

        $this.ratePie = function(number){

            var i=0;

            var time=setInterval(function(){

                if( i==number){

                    clearInterval(time);

                }else{

                    number >0 ? i++ : i--;

                }

                $this.ratePieNoAnimation(i);

                if( i>100 || i<-100){

                    $this.ratePieNoAnimation(number);

                    clearInterval(time);

                }

            }, 2000 / (number > 0 ? number : -number));

        };

    }

    new chart("yuan").ratePie(50);

</script>

</html>

canvas圆形进度条的更多相关文章

  1. canvas圆形进度条（逆时针）

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  2. HTML5效果：Canvas 实现圆形进度条并显示数字百分比

    实现效果 1.首先创建html代码 <canvas id="canvas" width="500" height="500" styl ...

  3. canvas 绘制圆形进度条

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. canvas绘制圆形进度条（或显示当前已浏览网页百分比）

    使用canvas绘制圆形进度条,或者是网页加载进度条 或者是显示你浏览了本网页多少-- 由于个浏览器的计算差异,打开浏览器时 初始值有所不同,但是当拉倒网页底部时,均显示100%. 兼容性:测试浏览器 ...

  5. css and canvas实现圆形进度条

    进度条效果:   话不多说,上代码 使用css动画实现,看到一篇博客的启发,稍微修改了下, css实现的原理是用两个半圆一开始隐藏,再分别旋转180度,最后成为一个整圆 半圆效果,一开始右边的半圆在盒 ...

  6. Android 高手进阶之自定义View，自定义属性（带进度的圆形进度条）

      Android 高手进阶(21)  版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请注明地址:http://blog.csdn.net/xiaanming/article/detail ...

  7. Android 带进度的圆形进度条

    最近项目有个需求,做带进度从下到上的圆形进度条. 网上查了一下资料,发现这篇博客写得不错http://blog.csdn.net/xiaanming/article/details/10298163 ...

  8. 自定义VIew——漂亮的圆形进度条

    package com.example.firstapp; import java.text.DecimalFormat; import android.annotation.SuppressLint ...

  9. Android 高手进阶，自己定义圆形进度条

    背景介绍 在Android 开发中,我们常常遇到各种各样绚丽的控件,所以,依靠我们Android本身所带的控件是远远不够的,许多时候须要我们自定义控件,在开发的过程中.我们公司遇到了一种须要自己写的一 ...

随机推荐

  1. 无线路由器WDS 桥接设置方法

    假设现在有a b c三台路由器,现在我们把b作为中心路由器,基本的配置之后使其能正常无线上网. 然后: 无线路由器A设置: 1.修改LAN口IP地址.在网络参数-LAN口设置中,修改IP地址和B路由器 ...

  2. 那些年做过的 .NET Web 项目和 iOS 之路的一些思考

    从2010年3月份出来工作到2015年初,做过的大大小小的 .NET Web 项目如下: (1)售楼系统产品    「Role: Team Member」 (2)中弘合同管理系统    「Role: ...

  3. 将j-ui(dwz)套用到thinkphp注意事项

    目前我用的 thinkphp 版本是  3.1.3 J-UI  dwz 版本好像是 1.4 现在 j-ui有 thinkphp的例子了,请尽量以他们原创为主,我这里都是一些自己搜集和自己钻研的土办法, ...

  4. [转]使用Xcode 4发布App 实例操作

    使用xcode 4发布app 实例操作是本文介绍的内容,不多说,我们直接进入话题. 1.iOS Provisioning Portal 和iTunes Connect 没有变,下载与安装.mobile ...

  5. oracle rac理解和用途扩展

    Oracle RAC的优势在于利用多个节点(数据库实例)组成一个数据库,这样在保证了数据库高可用性的情况下更充分的利用了多个主机的性能,而且可以通过增加节点进行性能的扩展.实现Oracle RAC需要 ...

  6. 不使用ajax,无刷新提交表单

    <form action="form_action.asp" method="get" onsubmit"check_form()" ...

  7. Eclipse项目名出现红叉

    一.背景与原因 项目第一次加进来的时候,我用的是D:\Java\jdk1.7.0_17,后来由于配置将tomcat切换到jboss,说是JBOSS某个版本只支持jdk6,我就将“环境变量JAVA_HO ...

  8. WPA字典锦集

    1.xiemimendictionary 字典下载(第二季),500W整理过后还有282W条不重复的密码 字典下载,600W整理过后还有400W条不重复的密码 历次泄+常用弱口令字典集合[无中文去重复 ...

  9. zepto - push

    var arr = ['1', '2', '3', '4']; arr.push('qwe'); console.log(arr);

  10. 2014 网选 广州赛区 hdu 5025 Saving Tang Monk（bfs+四维数组记录状态）

    /* 这是我做过的一道新类型的搜索题!从来没想过用四维数组记录状态! 以前做过的都是用二维的!自己的四维还是太狭隘了..... 题意:悟空救师傅 ! 在救师父之前要先把所有的钥匙找到! 每种钥匙有 k ...