canvas圆形进度条
通过定义一个canvas标签, new方法传进ID值,和旋转角度值,即可生成圆形进度条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆进度条</title>
</head>
<body>
<canvas id="yuan" width="200" height="200"></canvas>
</body>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
window.chart =function(ID){
var canvas = document.getElementById(ID);
var ctx = canvas.getContext("2d");
// 画布宽高
var W = canvas.width;
var H = canvas.height;
//度角
var degrees = 0;
var new_degrees = 0;
// 差额
var difference = 0;
var text,text_w; // 文字
var R =W < H ? W:H; //先默认环半径为canvas宽度
var outW =parseInt(R / 14); //环宽度
var outR = (R/2) -outW; //环半径=canvas宽度半径 -外环宽度
var $this = this;
console.log("canvas宽度:"+R);
console.log(outW);
console.log(outR); $this.ratePieNoAnimation = function (number){
degrees =360*number/100; // 园弧底图
ctx.clearRect(0,0,W,H);//先清画布
ctx.beginPath();
ctx.strokeStyle ="green";
// 园弧线的宽度
ctx.lineWidth = outW;
ctx.arc(W / 2, H / 2, outR, 0, Math.PI * 2, false);
ctx.stroke(); //圆弧动画
var r = degrees * Math.PI / 180;
ctx.beginPath();
ctx.strokeStyle = "#994746";
ctx.lineWidth = outW;
// 弧将从最顶端开始
ctx.arc(W / 2, H / 2, outR, 0 - 90 * Math.PI / 180, r - 90 * Math.PI / 180, false);
ctx.stroke(); // 文字添加
ctx.fillStyle = "#63d2ef";
ctx.shadowColor = "#eee";
ctx.font = "bold " + R / 6 + "px hanyi";
text = Math.floor(degrees / 360 * 100) + "%";
text_w = ctx.measureText(text).width;
ctx.fillText(text, W / 2 - text_w / 2, H / 2 + R / 10);
}; $this.ratePie = function(number){
var i=0;
var time=setInterval(function(){
if( i==number){
clearInterval(time);
}else{
number >0 ? i++ : i--;
}
$this.ratePieNoAnimation(i);
if( i>100 || i<-100){
$this.ratePieNoAnimation(number);
clearInterval(time);
}
}, 2000 / (number > 0 ? number : -number));
}; } new chart("yuan").ratePie(50);
</script>
</html>
canvas圆形进度条的更多相关文章
- canvas圆形进度条(逆时针)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- HTML5效果:Canvas 实现圆形进度条并显示数字百分比
实现效果 1.首先创建html代码 <canvas id="canvas" width="500" height="500" styl ...
- canvas 绘制圆形进度条
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- canvas绘制圆形进度条(或显示当前已浏览网页百分比)
使用canvas绘制圆形进度条,或者是网页加载进度条 或者是显示你浏览了本网页多少-- 由于个浏览器的计算差异,打开浏览器时 初始值有所不同,但是当拉倒网页底部时,均显示100%. 兼容性:测试浏览器 ...
- css and canvas实现圆形进度条
进度条效果: 话不多说,上代码 使用css动画实现,看到一篇博客的启发,稍微修改了下, css实现的原理是用两个半圆一开始隐藏,再分别旋转180度,最后成为一个整圆 半圆效果,一开始右边的半圆在盒 ...
- Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)
Android 高手进阶(21) 版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请注明地址:http://blog.csdn.net/xiaanming/article/detail ...
- Android 带进度的圆形进度条
最近项目有个需求,做带进度从下到上的圆形进度条. 网上查了一下资料,发现这篇博客写得不错http://blog.csdn.net/xiaanming/article/details/10298163 ...
- 自定义VIew——漂亮的圆形进度条
package com.example.firstapp; import java.text.DecimalFormat; import android.annotation.SuppressLint ...
- Android 高手进阶,自己定义圆形进度条
背景介绍 在Android 开发中,我们常常遇到各种各样绚丽的控件,所以,依靠我们Android本身所带的控件是远远不够的,许多时候须要我们自定义控件,在开发的过程中.我们公司遇到了一种须要自己写的一 ...
随机推荐
- 国行手机安装GOOGLE PLAY
原文地址:http://blog.sina.com.cn/s/blog_68cff87b0101a96k.html 相信国行的手机都是没有google Play 功能的吧,相比其它国外的手机,功能上逊 ...
- NPM私有服务器架设 FOR CentOS
确保计算机能够连接互连网. 一.安装 Couchdb1.6 1.(CentOS 6.7)如果版本低于6.7请使用下面命令更新系统库. yum update 2.使用下面命令安装依赖库 yum inst ...
- 【PRML读书笔记-Chapter1-Introduction】1.6 Information Theory
熵 给定一个离散变量,我们观察它的每一个取值所包含的信息量的大小,因此,我们用来表示信息量的大小,概率分布为.当p(x)=1时,说明这个事件一定会发生,因此,它带给我的信息为0.(因为一定会发生,毫无 ...
- Linux高级编程--09.线程互斥与同步
多个线程同时访问共享数据时可能会冲突,比如两个线程都要把某个全局变量增加1,这个操作在某平台需要三条指令完成: 从内存读变量值到寄存器 寄存器的值加1 将寄存器的值写回内存 假设两个线程在多处理器平台 ...
- ECMAScript 6中的数组操作方法
本文介绍ECMAScript 6即将带给我们新的数组操作方法,以及在怎样在现有浏览器应用这些新的数组特性. Note: 我将使用交替使用构造器(constructor)和类(class)两个术语. 类 ...
- js实现页面a向页面b传参的方法
方法一:使用HTML5本地化存储(localStorage) 组件(本地最大能存储5M数据)localStorage是本地永久存储数据,是cookie的优化 方法二:使用cookie将数据存放在客户的 ...
- SystemTap了解
SystemTrap是监控和跟踪运行中的Linux内核操作的动态方法. http://www.ibm.com/developerworks/cn/linux/l-systemtap/ 使用System ...
- 以神经网络使用为例的Matlab和Android混合编程
由于需要在一个Android项目中使用神经网络,而经过测试发现几个Github上开源项目的训练效果就是不如Matlab的工具箱好,所以就想在Android上使用Matlab神经网络代码(可是...) ...
- awk引用外部变量及调用系统命令方法
目标:想用awk与scp命令批量传送文件 前提:先搭好主机间的免密登陆环境(参考:http://www.cnblogs.com/tankaixiong/p/4172942.html) 实现脚本方法: ...
- 第二sprint总结
总结:在第二轮sprint中,团队的开发工作出现了极大的懈怠,团队成员分配的工作完成情况较差,进度较慢,希望能在最后一周中,完成预定的功能模块 个人贡献分: 124陈彦生:22=20*5*22% 14 ...