<!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. Java中关于String的split(String regex, int limit) 方法

    今天在对一个String对象进行拆分的时候,总是无法到达预计的结果.呈现数据的时候出现异常,后来debug之后才发现,错误出在String spilt上,于是开始好好研究下这东西,开始对api里的sp ...

  2. Web API的CPU占用100%

    我用Web API做了一个网站,网站很简单,请求就是几个普通的参数,提交到服务器后,在Web API里做一下参数验证,然后去访问Redis里的TIME命令,最后把TIME命令返回的结果计算出yyyy- ...

  3. 转：MFC创建多线程实例

    作者:http://blog.csdn.net/wangningyu/article/details/4404134 平时在MFC里使用多线程时其实是很方面的,因为微软提供了一个API让我们很方面的去 ...

  4. Android Activity整体管理和关闭工具类封装

    如何彻底退出程序,在任意位置退出程序,如何管理当前的运行栈,知道activity的堆栈结构等,本文封装了一个Activity管理类,可以方便随时退出程序. /** * 应用程序Activity管理类: ...

  5. HDU_1241——石油探索DFS

    Problem Description The GeoSurvComp geologic survey company is responsible for detecting underground ...

  6. HDU3726---Graph and Queries 离线处理+Treap

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3726 题意:n个点m条边的一张无向图,每个点有一个权值, 有3中操作. D X 删除第X条边 Q X ...

  7. USACO6.4-Wisconsin Squares:搜索

    Wisconsin Squares It's spring in Wisconsin and time to move the yearling calves to the yearling past ...

  8. [Qt] qtcreator 中打开console

    (1) qtcreator-->左侧Projects-->Run-->中间的checkbox (Run in terminal)打上勾 (2) 在项目的.pro文件中加上 " ...

  9. 升级Android ADT 和SDK

    因为眼下从事android开发工作,所以升级了下Android SDK和eclipse ADT插件 一.更新ADT 1.Eclipse中打开Help->Install New Software. ...

  10. 学习 Netty 3.x

    study link: http://netty.io/3.6/guide/#architecture 应用场景: Chat server that requires persistent conne ...