通过定义一个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. vs.net 2005 C# WinForm GroupBOX 的BUG？尝试读取或写入受保护的内存。这通常指示其他内存已损坏

    其实很久没有写程序了,国庆难得有空闲,写了个游戏辅助机器人,程序写好能用后本想把UI控件放到GroupBox里归下分类,美化下界面,结果一运行报“尝试读取或写入受保护的内存.这通常指示其他内存已损坏” ...

  2. Alsa驱动snd_soc_read的底层实现

    在分析snd_soc_codec_driver的结构体时,发现有些芯片的驱动中定义了字段reg_word_size, reg_cache_size, reg_cache_default,但没有定义re ...

  3. Linux系统下安装rz/sz命令及使用说明

    对于经常使用Linux系统的人员来说,少不了将本地的文件上传到服务器或者从服务器上下载文件到本地,rz / sz命令很方便的帮我们实现了这个功能,但是很多Linux系统初始并没有这两个命令.今天,我们 ...

  4. CGAL4.4+VC2008编译

    一: CGAL是欧盟资助的基础几何库,很底层, 纯算法, 对于你的项目和科研都是不可多得的好东西, 废话一句, 国内做这样的东西, 估计会活不下去交不了差的. 不多介绍.送上 英文原址, 从软件角度, ...

  5. 使用unetbootin制作Debian安装U盘

    有时需要在没有光驱的裸机上安装系统,这时我们可以使用unetbootin制作一个系统安装U盘. 1.在网上下载好vmlinuz,initrd.gz,boot.img.gz. 2.然后使用unetboo ...

  6. CSS 布局属性(display,float,clear,visibility,overflow,overflow-x,overflow-y)

    display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | ta ...

  7. UnWind Segue

    iOS 6 和 Xcode 4.5 中添加了一个新特性叫做“Unwind Segue”. 使用Unwind Segue,可以方便的在Navigation Controller的Controllers之 ...

  8. 快乐的JS正则表达式（三）

    ?的用途. 小任务:匹配一段网址如var str = "http://www.123.com/";注意http也可以是https var str = "http://i. ...

  9. C# 装箱与拆箱

    知识点  值类型.    值类型是在栈中分配内存,在声明时初始化才能使用,不能为null.    值类型超出作用范围系统自动释放内存.    主要由两类组成:结构,枚举(enum),结构分为以下几类: ...

  10. sourceinsight技巧

    Source Insight实质上是一个支持多种开发语言(java,c ,c++等等)的编辑器,只不过由于其查找.定位.彩色显示等功能的强大,常被我们当成源代码阅读工具使用. 所以,为了有效的阅读源程 ...