<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

<style>

    #canvas{display:block;margin:100px auto; background:#fff;}

</style>

<canvas id="canvas" width="300" height="300"></canvas>

    <script type="text/javascript">

        window.onload = function(){

            var canvas = document.getElementById("canvas");

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

            var W = canvas.width;

            var H = canvas.height;

            var deg=0,new_deg=0,dif=0;

            var loop,re_loop;

            var text,text_w;

            function init(){

                ctx.clearRect(0,0,W,H);

                ctx.beginPath();

                ctx.strokeStyle="#ebebeb";

                ctx.lineWidth=5;

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

                ctx.stroke();

                var r = deg*Math.PI/180;

                ctx.beginPath();

                ctx.strokeStyle = "#f31437";

                ctx.lineWidth=5;

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

                ctx.stroke();

                ctx.fillStyle="#f00";

                ctx.font="50px abc";

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

                text_w = ctx.measureText(text).width;

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

            }

            function draw(){

                new_deg = 250;//设置角度

                loop = setInterval(to,1000/dif);

            }

            function to(){

                if(deg == new_deg){

                    clearInterval(loop);

                }

                if(deg<new_deg){

                    deg++;

                }else{

                    deg--;

                }

                init();

            }

            draw();

            re_loop = setInterval(draw,2000);

        }

    </script>

</body>

</html>

环形进度条带数字显示(canvas)的更多相关文章

  1. 环形进度条的实现方法总结和动态时钟绘制（CSS3、SVG、Canvas）

    缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...

  2. canvas绘制环形进度条

    <!DOCTYPE html> <html > <head> <meta http-equiv="content-type" conten ...

  3. canvas环形进度条

    <style> canvas { border: 1px solid red; margin: 100px; }</style> <canvas id="rin ...

  4. html5 canvas绘制环形进度条，环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

  5. canvas实现半圆环形进度条

    html部分 <canvas id="canvas" width="150" height="150"> <p>抱歉 ...

  6. Canvas实现环形进度条

    Canvas实现环形进度条 直接上代码: <canvas width="200" height="200" >60%</canvas> ...

  7. 用初中数学知识撸一个canvas环形进度条

    周末好,今天给大家带来一款接地气的环形进度条组件vue-awesome-progress.近日被设计小姐姐要求实现这么一个环形进度条效果,大体由四部分组成,分别是底色圆环,进度弧,环内文字,进度圆点. ...

  8. 仿MIUI音量变化环形进度条实现

    Android中使用环形进度条的业务场景事实上蛮多的,比方下载文件的时候使用环形进度条.会给用户眼前一亮的感觉:再比方我大爱的MIUI系统,它的音量进度条就是使用环形进度条,尽显小米"为发烧 ...

  9. 【css】如何实现环形进度条

    最近团队的童鞋接到了一个有关环形进度条的需求,想要还原一个native的沿环轨迹渐变进度条的效果,看到这个效果的时候,笔者陷入了沉思.. 环形进度条的效果,最先想到的就是使用CSS利用两个半圆的hac ...

随机推荐

  1. HTTP_X_FORWARDED_FOR 和 REMOTE_ADDR的使用 php

    参考来源:http://qq398705749.iteye.com/blog/963818 php中HTTP_X_FORWARDED_FOR 和 REMOTE_ADDR的使用 1.REMOTE_ADD ...

  2. Swift—下标-备

    看下面的示例代码是不是使用过: var studentList: String[]  = ["张三","李四","王五"] studentL ...

  3. (摘)Zebra打印机异常处理

    一.一般条码打印设备按图指示方向,虚线为碳带安装路径,实线为标签路径.回卷后废碳带不易剥落,则在装入前用废标签的光滑底纸卷在回卷轴上,然后再上碳带.安装标签时,根据不同标签宽度调整限纸器.压头弹簧均匀 ...

  4. c# 6.0 学习笔记

    refer : http://www.cnblogs.com/yinrq/p/5600530.html http://www.cnblogs.com/wolf-sun/p/5168217.html h ...

  5. cf C. Mittens

    http://codeforces.com/contest/370/problem/C 题意:有n个人,m中颜色的手套,开始每个人都是两只相同颜色的手套,经过交换最多可以换出多少个人戴不同颜色的手套. ...

  6. C++面试问题总结

    转自:http://blog.csdn.net/wangtengqiang/article/details/8061806 1.static用法 static 的成员函数和成员变量,可直接通过类名:: ...

  7. Qt之模型/视图（自定义按钮）（重绘QStyleOptionButton）

    http://blog.csdn.net/liang19890820/article/details/50974059#comments

  8. FZU2176---easy problem （树链剖分）

    http://acm.fzu.edu.cn/problem.php?pid=2176 Problem 2176 easy problem Accept: 9    Submit: 32Time Lim ...

  9. html基础知识总结2

    下拉列表,文本域,复选框 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  10. CROW-5 WEB APP引擎商业计划书（HTML5方向）-微信网页版微信公众平台登录-水仙谷

    CROW-5 WEB APP引擎商业计划书(HTML5方向)-微信网页版微信公众平台登录-水仙谷 CROW-5 WEB APP引擎商业计划书(HTML5方向)