通过定义一个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. 编译升级php之路(5.5.7 到 5.5.37)

    为在一台旧服务器上能使用slim,共经历了: 1.安装composer(需要高版本php,原来是5.5.7) 2.升级php版本到5.5.37(编译出错,准备使用docker) 3.升级centos内 ...

  2. 打开 Mac OS X 隐藏的用户资源库文件夹的方法

    在较高版本的 Mac OS X 中,用户的资源库文件夹(/Users/username/Library)默认被系统隐藏了,从 Finder 窗口中不能直接打开. 但是通过下面这个方法可以快速打开用户资 ...

  3. xfire框架内部基本结构解析

    1 概述 xfire是webservice的一个实现框架,是apache旗下CXF的前身,是一个比较被广泛使用的webservice框架,网上有很多关于如何使用xfire或cxf的hello worl ...

  4. [Design Patterns] 4. Creation Pattern

    设计模式是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结,使用设计模式的目的是提高代码的可重用性,让代码更容易被他人理解,并保证代码可靠性.它是代码编制真正实现工程化. 四个关键元素 ...

  5. 开放产品开发（OPD）：开篇

    OPD?这是什么玩意?google一下.忘记说了,最近google被封锁的厉害,那就百度一下吧.可惜,OPD找不出是什么.你今天你找不到是正常的,因为之前还没有OPD,而现在才开始有OPD这个东东.相 ...

  6. SQL Server 2012：SQL Server体系结构——一个查询的生命周期（第2部分）

    计划缓存(Plan Cache) 如果SQL Server已经找到一个好的方式去执行一段代码时,应该把它作为随后的请求重用,因为生成执行计划是耗费时间且资源密集的,这样做是有有意义的. 如果没找到被缓 ...

  7. 《构建之法》第8、9、10章的读后感和第一个sprint总结

    第八章——主要介绍软件需求. 主要步骤:1.获取和引导需求.2.分析和定义需求.3.验证需求.4.在软件产品的生命周期中管理需求. 对软件需求的划分:1.对产品功能性的需求.2.对产品开发过程的需求. ...

  8. HDFS Append时packet的格式以及DataNode对block/checksum文件的处理

    HDFS Append时packet的格式以及DataNode对block/checksum文件的处理 HDFS的Block一般比较大,默认64MB/128MB,客户端给DataNode发数据实际上是 ...

  9. sql跨数据库转移

    结构一样的话insert into 数据库A.dbo.TableAselect * from 数据库B.dbo.TableA 另外:nsert into DDD(字段1,字段2,字段3 .....)( ...

  10. DataTable 获取列名 DataTable批量更新至数据库

    好久没写东西了,这几个月也没下功夫钻研技术,愧疚啊.说下最近刚学会的DataTable 的用法吧,新手适合看下. 1 DataTable 获取列名 在处理数据的时候大家都会用到模型,从datatabl ...