<!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. MFC自创建类了解

    CxxxxView 视窗类 所有的按键 等消息都先在这里响应 CxxxxDoc 文档类 CMainFrame 框架类 CxxxxApp 应用程序类 CxxxxView类中的 OnDraw函数 在窗口改 ...

  2. IOS文件操作的两种方式：NSFileManager操作和流操作

    1.常见的NSFileManager文件方法 -(NSData *)contentsAtPath:path //从一个文件读取数据 -(BOOL)createFileAtPath: path cont ...

  3. 转：1.1 cdev_init cdev_alloc 使用说明

    对 “从globalmem学习linux字符设备驱动” 的 cdev_init 和 cdev_alloc中一些不清楚的地方进行说明:   cdev_init 和 cdev_alloc函数定义如下:   ...

  4. zoj 3647 Gao the Grid

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4837 先求出从所有点随机找出三个点的组合数,然后去掉共线的,平行好去掉,斜线就 ...

  5. 欧拉计划之Largest palindrome product

    A palindromic number reads the same both ways. The largest palindrome made from the product of two 2 ...

  6. win8 开启administrator 管理员帐户

    进入命令提示符以后,输入命令:[net user administrator /active:yes]然后注销,就可以使用administrator登录.. 如果想要取消administrator激活 ...

  7. 我学hash_map(2)

    啊,转眼之间就来到了我学hash_map(2)了.我们也从hash_map转移到了unordered_map上来了,今天这个文章的目的就是要来分享一下使用这个hash_map,哦不,unordered ...

  8. Makefile如何通过宏开关进行条件编译

    在开发中经常会遇到需要条件编译一段代码,即: #ifdef DEBUG { 如果定义了DUBUG,则执行此段代码!} #else {否则执行此段代码!} 这就需要通过宏开关来进行条件编译,也就是常说的 ...

  9. 大型分布式C++框架《四：netio之请求包中转站 上》

    本来一篇文章就该搞定的.结果要分上下篇了.主要是最近颈椎很不舒服.同时还在做秒杀的需求也挺忙的. 现在不能久坐.看代码的时间变少了.然后还买了两本治疗颈椎的书.在学着,不过感觉没啥用.突然心里好害怕. ...

  10. Junit 学习

    一. 断言核心方法 示例代码: package com.test; import org.junit.Assert; import org.junit.Test; /** * @Title: test ...