通过定义一个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. MySQL实现类似Oracle的序列

    MySQL实现类似Oracle的序列 2013-10-22 10:33:35     我来说两句      作者:走过的足迹 收藏    我要投稿 MySQL实现类似Oracle的序列   Oracl ...

  2. 《Programming with Objective-C》

    苹果官方文档:不稳定的传送门 读书笔记共有以下几篇,其他的知识点不重要或者已经熟悉不需记录 <Programming with Objective-C>第三章 Working with O ...

  3. iOS 7.1 安装 企业应用 提示 无法下载应用程序

    首先这种情况排除https影响,这个就不提了.请自行查询iOS https 部署. 其次系统版本是iOS 7.1,之后的版本安装都没问题. 说下我是怎么发现问题的,我找了个真机,发现直接调试提示bun ...

  4. 关于在for循环中绑定事件打印变量i是最后一次。

    其实函数引用的外部变量都是最后一次的值. <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  5. Rendering Path

    Rendering Path:渲染路径 设置:1.Player Setting,2.Camera(会覆盖PlayerSetting中的设置) 选择:根据渲染内容和目标平台来选择合适的Rendering ...

  6. HTML简明教程（一）

    HTML简明教程(一) 内容主体来自:W3School 一.HTML 简介 二.HTML 基础 三.HTML 元素 四.HTML 属性 五.HTML 标题 六.HTML 段落 七.HTML 文本格式化 ...

  7. 基于HTML5技术的电力3D监控应用（四）

    回答了知乎问题较长,一些使用WebGL的经验,作为新的一篇: 正好逛到这个问题,正好是2013年底,正好最近基于的HT for Web 3D做的电力项目收尾,正好用到的就是WebGL技术,因此说说自己 ...

  8. DateTime to long

    private static DateTime BaseTime = new DateTime(1970, 1, 1); 将unixtime转换为.NET的DateTime public static ...

  9. mysql DDL时出现的锁等待状态

    如下表格所示: session1: session2: 10:30:27 root@localhost:[testdb] mysql.sock>select * from t2;+------+ ...

  10. [Solution] 简单数字识别之Tesseract

    图像识别涉及的理论:傅里叶变换,图形形态学,滤波,矩阵变换等等. Tesseract的出现为了解决在没有这些复杂的理论基础,快速识别图像的框架. 准备: 1.样本图像学习,预处理 (平均每1个元素出现 ...