canvas/CSS仪表盘效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas仪表盘动画效果</title>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
canvas {
display: none;
border: 1px solid red;
display: block;
margin: 0 auto;
background: -webkit-linear-gradient(top, #0e83f5 0%, #21bdf6 100%);
}
</style>
<script type="text/javascript">
window.onload = function() {
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
cWidth = canvas.width,
cHeight = canvas.height,
score = canvas.attributes['data-score'].value,
radius = 100, //圆的半径
deg0 = Math.PI / 9, //每一格20度
mum = 100, //数字步长
/*
* 要求：圆弧走完，数字得自加完，就得确定圆弧走的次数和数字走的次数相等！
数字最大10000，对应的度数是11*PI/9,那每个步长mum对应的度数如下：
*/
deg1 = mum * Math.PI * 11 / 9 / 10000; // 每mum对应的度数
var angle = 0, //初始角度
credit = 0; //数字默认值开始数
var drawFrame = function() {
if(score < 0 || score > 10000) {
alert('额度只能是0--10000')
score = 10000;
}
ctx.save();
ctx.clearRect(0, 0, cWidth, cHeight);
ctx.translate(cWidth / 2, cHeight / 2);
ctx.rotate(8 * deg0); //160度
var aim = score * deg1 / mum; //数字对应的弧度数,先确定要走几次,除以mum,然后计算对应的弧度数
if(angle < aim) {
angle += deg1;
}
if(credit < score) {
credit += mum; //默认数字间隔是mum
} else if(credit >= 10000) {
credit = 10000;
}
//信用额度
ctx.save();
ctx.rotate(10 * deg0);
ctx.fillStyle = 'white';
ctx.font = '28px Microsoft yahei';
ctx.textAlign = 'center';
ctx.fillText('信用额度', 0, 50);
ctx.restore();
//
text(credit);
ctx.save();
ctx.beginPath();
ctx.lineWidth = 5;
ctx.strokeStyle = 'rgba(255, 255, 255, 1)';
ctx.arc(0, 0, radius, 0, angle, false); //动画圆环
ctx.stroke();
ctx.restore();
ctx.save();
ctx.rotate(10 * deg0); //200度
ctx.restore();
ctx.beginPath();
ctx.strokeStyle = 'rgba(255, 0, 0, .1)';
ctx.lineWidth = 5;
ctx.arc(0, 0, radius, 0, 11 * deg0, false); //设置外圆环220度
ctx.stroke();
ctx.restore();
window.requestAnimFrame(drawFrame);
}
function text(process) {
ctx.save();
ctx.rotate(10 * deg0); //200度
ctx.fillStyle = 'red';
ctx.font = '40px Microsoft yahei';
ctx.textAlign = 'center';
ctx.textBaseLine = 'top';
ctx.fillText("￥:" + process, 0, 10);
ctx.restore();
}
setTimeout(function() {
document.getElementById("canvas").style.display = "block";
drawFrame();
}, 10)
}
</script>
</head>
<body>
<canvas id="canvas" width="300" height="300" data-score='8100'></canvas>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#yibiao {
width: 400px;
height: 200px;
background: white;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.yuan1 {
width: 400px;
height: 400px;
position: absolute;
top: 0px;
left: 0px;
border-radius: 50%;
background: black;
opacity: 0.2;
}
.yuan2 {
width: 360px;
height: 360px;
position: absolute;
top: 20px;
left: 20px;
border-radius: 50%;
background: white;
}
.clip {
width: 400px;
height: 400px;
position: absolute;
top: 0px;
left: 0px;
border-radius: 50%;
background: blue;
clip: rect(200px, 400px, 400px, 0px);
transform: rotate(0deg);
}
.num {
position: absolute;
width: 100%;
height: 100px;
top: 100px;
text-align: center;
font-size: 100px;
}
</style>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
$(function() {
//默认数字0--10000，默认数字自增步长100
var buchang = 200;
var deg = 180 * buchang / 10000; //每个步长代表的度数
var degs = parseInt($(".num").text()) / buchang * deg; //先计算有几个步长,算出半圆要转的度数
var du = 0; //起始度数
var bu = 0; //数字自增步长
function zhuan() {
$(".clip").css("transform", "rotate(" + du + "deg)");
$(".num").text(bu);
du += deg;
bu += buchang;
if(du >= degs) {
clearInterval(setin);
}
}
var setin = setInterval(zhuan, 30)
})
</script>
</head>
<body>
<div id="yibiao">
<div class="yuan1"></div>
<div class="clip"></div>
<div class="yuan2"></div>
<div class="num">5000</div>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS 仪表盘</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
* {
margin: 0px;
padding: 0px;
border: 0px;
}
html,
body {
width: 100%;
height: 100%;
background: -webkit-linear-gradient(top, #0e83f5 0%, #21bdf6 100%);
}
.sb {
background: transparent;
box-sizing: border-box;
width: 400px;
height: 272.8px;
/*272.8px：220度*/
margin: 0 auto;
position: relative;
overflow: hidden;
}
.deg0 {
position: absolute;
width: 400px;
height: 400px;
background: red;
border-radius: 50%;
top: 0px;
left: 0px;
}
.deg1 {
position: absolute;
width: 370px;
height: 370px;
background: -webkit-linear-gradient(top, #0E83F5 0%, #169BF5 100%);
border-radius: 50%;
top: 15px;
left: 15px;
z-index: 1000;
}
.clip1 {
position: absolute;
width: 400px;
height: 400px;
background: green;
border-radius: 50%;
top: 0px;
left: 0px;
clip: rect(0px, 200px, 200px, 0px);
transform: rotate(-113deg);
/*对应90+23*/
}
.clip2 {
position: absolute;
width: 400px;
height: 400px;
background: green;
border-radius: 50%;
top: 0px;
left: 0px;
clip: rect(0px, 400px, 200px, 200px);
transform: rotate(113deg);
}
.clip3 {
position: absolute;
width: 400px;
height: 400px;
background: green;
border-radius: 50%;
top: 0px;
left: 0px;
clip: rect(200px, 200px, 400px, 0px);
transform: rotate(-23deg);
/*对应20度*/
}
.clip4 {
position: absolute;
width: 400px;
height: 400px;
background: green;
border-radius: 50%;
top: 0px;
left: 0px;
clip: rect(200px, 400px, 400px, 200px);
transform: rotate(23deg);
/*对应20度*/
}
p.num {
position: absolute;
width: 400px;
height: 200px;
top: 150px;
color: red;
text-align: center;
font-size: 100px;
z-index: 10000;
}
</style>
<script src="" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
var sbs = 9000;
//默认数字0--10000，默认数字自增步长100
var buchang = 100;
var deg = 220 * buchang / 10000; //每个步长代表的度数 2.2
var degs = sbs / buchang * deg; //先计算有几个步长,算出半圆要转的度数
var du = -23; //起始度数
var num = 0;
console.log(degs)
var sb = setInterval(function() {
$(".num").text(num);
if(du <= 67) {
$(".clip3").css("transform", "rotate(" + du + "deg)");
} else if(du > 67 && du <= 157) {
$(".clip3").css("transform", "rotate(67deg)");
$(".clip1").css("transform", "rotate(" + (-23 + (du - 67)) + "deg)");
} else if(du > 157 && du <= 220) {
$(".clip3").css("transform", "rotate(67deg)");
$(".clip1").css("transform", "rotate(67deg)");
$(".clip4").css("transform", "rotate(90deg)");
$(".clip2").css("transform", "rotate(" + (-23 + (du - 157)) + "deg)");
}
if(du >= degs || num >= sbs) {
clearInterval(sb)
}
du += deg;
num += buchang;
}, 20)
})
</script>
</head>
<body>
<div class="sb">
<div class="deg0">
<div class="deg1"></div>
</div>
<div class="clip1"></div>
<div class="clip2"></div>
<div class="clip3"></div>
<div class="clip4"></div>
<p class="num">0</p>
</div>
</body>
</html>
关于requestAnimationFrame和 cancelAnimationFrame
兼容写法：
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60); //浏览器默认刷新频率
};
})(); 基本用法与区别：
setTimeout(code, millseconds)用于延时执行参数指定的代码，如果在指定的延迟时间之前，你想取消这个执行，那么直接用clearTimeout(timeoutId)来清除任务，timeoutID是setTimeout时返回的；setInterval(code, millseconds)用于每隔一段时间执行指定的代码，永无停歇，除非你反悔了，想清除它，可以使用clearInterval(intervalId)，这样从调用 clearInterval 开始，就不会在有重复执行的任务，intervalId是setInterval时返回的；requestAnimationFrame(code)，一般用于canvas动画，与setTimeout方法类似，区别是setTimeout是用户指定的，而requestAnimationFrame是浏览器刷新频率决定的，一般遵循 W3C 标准，它在浏览器每次刷新页面之前执行。
requestAnimationFrame不需要使用者指定循环间隔时间，浏览器会基于当前页面是否可见、CPU的负荷情况等来自行决定最佳的帧速率，从而更合理地使用CPU。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
var id = null;
var i=0;
function a(time) {
console.log(i++);
id = window.requestAnimationFrame(a);
}
function b(){
window.cancelAnimationFrame(id);
}
document.getElementById("start").onclick=a; //相当开始
document.getElementById("zantin").onclick=b; //相当暂停
}
</script>
</head>
<body>
<button id="start">开始</button>
<button id="zantin">暂停</button>
</body>
</html>
点击开始，此时控制台一直计数下去，点击暂停，计数器暂停，再次点击开始会从原来的位置继续计数下去。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击实现冲击波</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html,body{
font-family:"微软雅黑";
}
.wave{
position:relative;
float:left;
width:50%;
height:420px;
}
.wave a{
position:absolute;
top:50%;
left:50%;
display:inline-block;
width:120px;
height:50px;
margin-left:-60px;
margin-top:-25px;
line-height:50px;
text-align:center;
border-radius:5px;
color:red;
font-size:16px;
cursor:pointer;
/*overflow:hidden;*/
}
#wave1{
background-color:blue;
}
#wave1 a{
background-color:pink;
}
#wave1 a:after{
content: "";
display: block;
position: absolute;
left: -40px;
top: -75px;
width: 200px;
height: 200px;
background: rgba(255,255,255,0.8);
border-radius: 50%;
opacity:0;
transition: all 1s;
}
#wave1 a:active:after{
width: 0;
height: 0;
left:60px;
top: 25px;
opacity: 1;
transition-duration: 0s;
}
</style>
</head>
<body>
<div class="wave" id="wave1">
<a>点我</a>
</div>
</body>
</html>canvas/CSS仪表盘效果的更多相关文章
- 基于canvas的仪表盘效果
概述 基于Canvas实现的仪表盘及效果.通过配置参数,可以任意修改仪表盘颜色,刻度,动画过渡时间等,满足不同场景下的使用.同时使用原生的Canvas,也是学习Canvas的很好的例子. 详细 代码下 ...
- canvas/CSS实现仪表盘效果
手机上看比较虚 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- 赞！15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- CSS Shake – 摇摆摇摆！动感的 CSS 抖动效果
CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...
- Simptip – 使用 Sass 制作的 CSS Tooltip 效果
Simptip 是一个简单基于 Sass 的 CSS 工具提示效果.帮助你在网站中加入在不同的方向(上.左.右.下)的工具提示,也可以设置不同的颜色如成功.信息.警告和危险.最后还有其他特性如软边.半 ...
- CSS 居中效果完整指南
本文翻译自:<Centering in CSS: A Complete Guide> 使用 CSS 实现效果困难吗?显然不是.实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法 ...
- 纯CSS手风琴效果
CSS手风琴效果 主体代码如下: ...
- 按钮制作技巧（css精灵效果）-高级版
[转自己以前的文章] 无论用什么语言,大家敲程序的时候多多少少都会遇到做按钮的时候.今天分享一个之前学做按钮的技巧,有人叫做css精灵效果. 通常做按钮的思路都用附图中的第一种:两张图片交互的形式,让 ...
随机推荐
- [转]scp、sftp命令使用
http://wangxuedong.com/index.php/archives/182/ 前言 有时候想上传文件到服务器或者从服务器下载一个文件到本地,但是服务器还没有配置ftp等环境,这时候可以 ...
- [转]PO BO VO DTO POJO DAO概念及其作用（附转换图）
来源:http://www.blogjava.net/vip01/archive/2013/05/25/92430.html J2EE开发中大量的专业缩略语很是让人迷惑,尤其是跟一些高手讨论问题的时候 ...
- CentOS7下Django环境的搭建安装python3.6.5,virtualenv django1.11.14
1.帖子1https://blog.csdn.net/a249900679/article/details/51527200 2.virtualenv https://www.cnblogs.com/ ...
- Hbase的写入负载均衡
在写Hbase的时候,会担心数据分布在各个region上不均匀(与预分区无关): 这个时候可能想到的方式:hash.加盐等(当然是可以的,但是读取的时候咋办呢? 哪天写一个这样的文章) 本文采用新方式 ...
- python对象、引用
1.python对象 python中 所有的python对象都有3个特征: 身份,类型和值 身份: 每个对象有一个唯一的身份标识自己,这个值可以被认为是该对象内存地址.id()查看. 类型 type( ...
- HttpWatch入门使用教程
HttpWatch V10.0.20.0 官方免费版 HttpWatch是强大的网页数据分析工具.集成... HttpWatch Professional V10.0.20.0 官方下载 HttpWa ...
- 高性能之js
alloyteam团队的总结: 链接在:http://www.alloyteam.com/2012/10/high-performance-front-end-high-performance-jav ...
- Python dictionary 字典 常用法
Python dictionary 字典 常用法 d = {} d.has_key(key_in) # if has the key of key_in d.keys() ...
- @Transactional spring 配置事务 注意事项
1. 在需要事务管理的地方加@Transactional 注解.@Transactional 注解可以被应用于接口定义和接口方法.类定义和类的 public 方法上 . 2. @Transaction ...
- P3258 [JLOI2014]松鼠的新家
P3258 [JLOI2014]松鼠的新家倍增lca+树上差分,从叶子节点向根节点求前缀和,dfs求子树和即可,最后,把每次的起点和终点都. #include<iostream> #inc ...