通过定义一个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. ODAC（V9.5.15) 学习笔记（十九）主键值自动生成

    ODAC支持通过Oracle的序列来自动生成表的主键功能.这个过程允许在客户端自动完成,不需要过多代码.这个对一些要求自动增长字段做主键的场合非常有用.其实现步骤为: 1.数据库必须先建立生成主键的序 ...

  2. SPF 简介

    SPF 简介 摘要: SPF 是发送方策略框架 (Sender Policy Framework) 的缩写,希望能成为一个防伪标准,来防止伪造邮件地址.这篇文章对 SPF 进行了简单介绍,并介绍了它的 ...

  3. 修改mysql默认字符集的方法

    +--------------------------+---------------------------------+ | Variable_name | Value | +---------- ...

  4. 【转】Velocity模板(VM)语言介绍

    http://www.blogjava.net/caizh2009/archive/2010/08/20/329495.html Velocity是什么? Velocity是一个基于java的模板引擎 ...

  5. Cannot find SS.INI file for user *** 解决方法

    昨天还用的好好的VSS今天早上一来就提示: Cannot find SS.INI file for user *** 度娘了一下,好像都是说的: 1,vss\users\***\  下无文件SS.IN ...

  6. css3 keyframes在yuicompressor下压缩问题

    @keyframes proBackAction { 0% { opacity:; } 100% { opacity: .8; } } @keyframes proBackAction { 0{ op ...

  7. poj 1474 Video Surveillance - 求多边形有没有核

    /* poj 1474 Video Surveillance - 求多边形有没有核 */ #include <stdio.h> #include<math.h> const d ...

  8. 自动化基础普及之selenium是啥？

    Selenium 并不像QTP那样让人一下子就明白是什么?它是编程人员的最爱,但它却对测试新手产生了很大的阻碍. Selenium 是啥? Selenium RC是啥? Webdriver 又是啥? ...

  9. [mysql]brew 安装 配置 操作 mysql（中文问题）

    mac 下卸载mysqldmg mac下mysql的DMG格式安装内有安装文件,却没有卸载文件--很郁闷的事. 网上搜了一下,发现给的方法原来得手动去删. 很多文章记述要删的文件不完整,后来在stac ...

  10. SystemTap知识（一）

    SystemTap是一个系统的跟踪探测工具.它能让用户来跟踪和研究计算机系统在底层的实现. 安装SystemTap需要为你的系统内核安装-devel,-debuginfo,-debuginfo-com ...