环形进度条带数字显示(canvas)
<!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)的更多相关文章
- 环形进度条的实现方法总结和动态时钟绘制(CSS3、SVG、Canvas)
缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...
- canvas绘制环形进度条
<!DOCTYPE html> <html > <head> <meta http-equiv="content-type" conten ...
- canvas环形进度条
<style> canvas { border: 1px solid red; margin: 100px; }</style> <canvas id="rin ...
- html5 canvas绘制环形进度条,环形渐变色仪表图
html5 canvas绘制环形进度条,环形渐变色仪表图 在绘制圆环前,我们需要知道canvas arc() 方 ...
- canvas实现半圆环形进度条
html部分 <canvas id="canvas" width="150" height="150"> <p>抱歉 ...
- Canvas实现环形进度条
Canvas实现环形进度条 直接上代码: <canvas width="200" height="200" >60%</canvas> ...
- 用初中数学知识撸一个canvas环形进度条
周末好,今天给大家带来一款接地气的环形进度条组件vue-awesome-progress.近日被设计小姐姐要求实现这么一个环形进度条效果,大体由四部分组成,分别是底色圆环,进度弧,环内文字,进度圆点. ...
- 仿MIUI音量变化环形进度条实现
Android中使用环形进度条的业务场景事实上蛮多的,比方下载文件的时候使用环形进度条.会给用户眼前一亮的感觉:再比方我大爱的MIUI系统,它的音量进度条就是使用环形进度条,尽显小米"为发烧 ...
- 【css】如何实现环形进度条
最近团队的童鞋接到了一个有关环形进度条的需求,想要还原一个native的沿环轨迹渐变进度条的效果,看到这个效果的时候,笔者陷入了沉思.. 环形进度条的效果,最先想到的就是使用CSS利用两个半圆的hac ...
随机推荐
- HTTP_X_FORWARDED_FOR 和 REMOTE_ADDR的使用 php
参考来源:http://qq398705749.iteye.com/blog/963818 php中HTTP_X_FORWARDED_FOR 和 REMOTE_ADDR的使用 1.REMOTE_ADD ...
- Android开发者须知的几种APP加密方式--备
作为一个Android开发者,不仅需要使自己的APP功能丰富,便于使用,同时也需要去完善APP的安全性,下面就介绍几种简单而又可靠的加密方法.1.Spongy Castle Spongy Castle ...
- 编译TWRP-recovery教程及源码地址
TWRP这个是一个老外的开源项目,全称Team-Win-Recovery-Project Source:https://github.com/TeamWin/Team-Win-Recovery-Pro ...
- zabbix 插件使用问题
[elk@dr-mysql01 frontend]$ ../../bin/logstash -f std02.conf Settings: Default pipeline workers: 8 Pi ...
- Android中Chronometer 计时器和震动服务控件
Chronometer 计时器控件 首先在布局文件中添加chronometer控件:然后在mainActivity中获取到该控件 4 然后通过Button时间监听器中开启计时操作 5 chronome ...
- Android中ListView异步加载数据
1.主Activity public class MainActivity extends Activity { private ListView listView; private ArrayLis ...
- HDU_2057——64位无符号16进制数的运算
Problem Description There must be many A + B problems in our HDOJ , now a new one is coming. Give yo ...
- DLL模块:C++在VS下创建、调用dll
1.dll的优点 代码复用是提高软件开发效率的重要途径.一般而言,只要某部分代码具有通用性,就可将它构造成相对独立的功能模块并在之后的项目中重复使用.比较常见的例子是各种应用程序框架,ATL.MFC等 ...
- Android:ImageView应用之图片浏览器
ImageView控件实现的简单图片浏览器 一.纯显示图片: 引言: 读者在做这个东西的时候,需要自己把图片在源程序中导入. 读者要注意:所有导入的图片之前,图片的命名只可以是小写英文和数字. 效果图 ...
- POJ1743---Musical Theme (后缀数组+二分)
题意 :求最长不相交重复子串的长度.. 可以先求出LCP,,对于长度 二分出答案..(竟然不会写二分) #include <set> #include <map> #inclu ...