<!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. .NET MVC 插件化框架支持原生MVC的Area和路由特性

    前面开放的源码只是简单的Plugin的实现,支持了插件的热插拔,最近晚上偶然想到,原生的MVC提供Areas和RouteAtrribute等路由特性标签,按照先前的做法,无法解析插件的路由特性和Are ...

  2. SVM及其对偶

    引自 http://my.oschina.net/wangguolongnk/blog/111349 1. 支持向量机的目的是什么? 对于用于分类的支持向量机来说,给定一个包含正例和反例(正样本点和负 ...

  3. Android调用第三方应用

    Intent intent=new Intent(); //包名 包名+类名(全路径) intent.setClassName("com.qn.app.store", " ...

  4. HDU_1042——阶乘,万进制

    #include <cstdio> ; const int BASE = MAX; int main() { int n, i, j; while(~scanf("%d" ...

  5. ubuntu的web开发环境搭建

    为了保持mac的干净整洁,决定用PD搭建一条web开发环境,记下整个过程. ubuntu 首先是操作系统,本着习惯就好的原则,选用了Ubuntu server 12.04.4版.系统的安装很简单,ht ...

  6. Java 截取反斜杠--java使用split拆分特殊字符

    Java 截取反斜杠 replaceAll和split (“\”) 问题解决办法 xxx.split("\\") 显然得不到想要的结果 正确方法 xxx.split("\ ...

  7. hdu 1331 Function Run Fun

    Problem Description We all love recursion! Don't we? Consider a three-parameter recursive function w ...

  8. mysql中的unique

    distinct可以把重复的行去掉,查询时候用select distinct * from ...; unique在MySQL中是完整性约束里的一种,如果某列的值需要是唯一的那么就添加UNIQUE约束 ...

  9. 今天在写powershell脚本中犯的两个错误

    可能是因为牙痛没睡好,今天老是犯错,还是脚本写错,特别难调. 第一个错误: powershell脚本里面,函数与函数互相调用的传参.其实就像调用普通的cmdlet一样的写法,应该这么写: Add-Sc ...

  10. 自定义listView添加滑动删除功能

    今天研究了一下android里面的手势,结合昨天学习的自定义View,做了一个自定义的listview,继承自listView,添加了条目的滑动手势操作,滑动后出现一个删除按钮,点击删除按钮,触发一个 ...