<!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. sublime 使用快捷记录

    1．sublime 中有一个htmlprettify 插件 这个插件 可以用来格式化 html css js 使我们的代码看着比较美观 ctrl + shift + h 这个快捷方式是美化代码间距的 ...

  2. 简单运用 activity 的 button 点击事件

    今天我们要讲的主要是四大组件之一Activity Activity 在英文中是活动的意思.活动就是我们与用户进行交互的一个场所. activity 整个的活动流程是什么呢?我们用一个图来看下 当然今天 ...

  3. UNIX网络进程间通信漫谈（1）

    进程间通信 IPC是进程间通信的简称,指的是运行在某个操作系统上的不同进程间各种消息传递方式,在Unix操作系统过去30年的演变史中,消息传递经历了如下几个阶段: 管道,管道是第一个广泛使用的IPC形 ...

  4. RAILS局部视图操作样例

    按如下书操作的,讲得很易懂.. <html> <head> <title>SampleApp</title> <%= stylesheet_lin ...

  5. 用PYTHON实现将电脑里的所有文件按大小排序，便于清理

    嘿嘿,慢慢找到写代码的感觉了. 这个小程序涉及的东东还是很多的,数据结构的设计,错误的处理,快速字典排序,文件数值调整.... import os,os.path import glob SUFFIX ...

  6. PCB的阻抗控制

    多层板的结构: 通常我们所说的多层板是由芯板和半固化片互相层叠压合而成的,芯板是一种硬质的.有特定厚度的.两面包铜的板材,是构成印制板的基础材料.而半固化片构成所谓的浸润层,起到粘合芯板的作用,虽然也 ...

  7. AcitonBar 自定义布局

    Android系统中ActionBar默认的布局不美观且难于控制,通过为ActionBar自定义布局的方式可以灵活控制ActionBar. 自定义Activity主题和ActionBar样式 在新建的 ...

  8. HDOJ 1266 Reverse Number（数字反向输出题）

    Problem Description Welcome to 2006'4 computer college programming contest! Specially, I give my bes ...

  9. 【转】编写Chrome扩展程序

    Chrome的扩展程序很多,也很容易入门,可以来简单实现一下 看看,慢慢就能实现出一个扩展程序来 每个扩展程序应用一般会包含: 一个manifest清单文件 html文件 js文件 其他文件等 可以看 ...

  10. eclipse 解决插件失效

    昨天系统崩溃,重装系统后eclipse突然对links方式加载插件失效.用尽了网上各种解决方法,始终不行.在%eclispe_dir%/configration/org.eclipse.update/ ...