<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Canvas动画仪表盘特效DEMO2_网页模板</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<link rel="stylesheet" href="../fonts/fonts.css">
<style type="text/css">
.btn-container{
padding: 1em 0;
text-align: center;
}
.container{
width: 700px;
margin: 50px auto;
}
</style>
<script src="js/gauge.min.js"></script>
</head>
<body>
<div class="zzsc-container">
<header class="zzsc-header">
<div class="zzsc-demo center">
<a href="index.html">radial</a>
<a href="radial-component.html" class="current">radial-component</a>
<a href="linear-component.html">linear-component</a>
<a href="issue-63.html">issue-63</a>
<a href="async.html">async</a>
<a href="scripted.html">scripted</a>
</div>
</header>
<div class="btn-container">
<button onclick="animateGauges()">Animate</button>
<button onclick="stopGaugesAnimation()">Stop animation</button>
</div>
<div class="container">
<canvas data-type="radial-gauge"
data-width="300"
data-height="300"
data-units="Km/h"
data-title="false"
data-value="33.77"
data-animate-on-init="true"
data-animated-value="true"
data-min-value="0"
data-max-value="220"
data-major-ticks="0,20,40,60,80,100,120,140,160,180,200,220"
data-minor-ticks="2"
data-stroke-ticks="false"
data-highlights='[
{ "from": 0, "to": 50, "color": "rgba(0,255,0,.15)" },
{ "from": 50, "to": 100, "color": "rgba(255,255,0,.15)" },
{ "from": 100, "to": 150, "color": "rgba(255,30,0,.25)" },
{ "from": 150, "to": 200, "color": "rgba(255,0,225,.25)" },
{ "from": 200, "to": 220, "color": "rgba(0,0,255,.25)" }
]'
data-color-plate="transparent"
data-color-major-ticks="#f5f5f5"
data-color-minor-ticks="#ddd"
data-color-title="#fff"
data-color-units="#ccc"
data-color-numbers="#eee"
data-color-needle-start="rgba(240, 128, 128, 1)"
data-color-needle-end="rgba(255, 160, 122, .9)"
data-value-box="true"
data-animation-rule="bounce"
data-animation-duration="500"
data-font-value="Led"
data-font-numbers="Led"
data-border-outer-width="3"
data-border-middle-width="3"
data-border-inner-width="3"
></canvas>
<canvas data-type="radial-gauge"
data-width="300"
data-height="300"
data-units="Km/h"
data-title="false"
data-min-value="10"
data-max-value="210"
data-value="33.77"
data-animate-on-init="true"
data-major-ticks="10,30,50,70,90,110,130,150,170,190,210"
data-minor-ticks="2"
data-stroke-ticks="true"
data-highlights='[{"from": 160, "to": 210, "color": "rgba(200, 50, 50, .75)"}]'
data-color-plate="#222"
data-color-major-ticks="#f5f5f5"
data-color-minor-ticks="#ddd"
data-color-title="#fff"
data-color-units="#ccc"
data-color-numbers="#eee"
data-color-needle-start="rgba(240, 128, 128, 1)"
data-color-needle-end="rgba(255, 160, 122, .9)"
data-value-box="true"
data-font-value="Led"
data-font-numbers="Led"
data-animated-value="true"
data-borders="false"
data-border-shadow-width="0"
data-needle-type="arrow"
data-needle-width="2"
data-needle-circle-size="7"
data-needle-circle-outer="true"
data-needle-circle-inner="false"
data-animation-duration="1500"
data-animation-rule="linear"
data-ticks-angle="250"
data-start-angle="55"
data-color-needle-shadow-down="#333"
data-value-box-width="45"
></canvas>
<canvas data-type="radial-gauge"
data-width="300"
data-height="300"
data-min-value="0"
data-max-value="360"
data-major-ticks="N,NE,E,SE,S,SW,W,NW,N"
data-minor-ticks="22"
data-ticks-angle="360"
data-start-angle="180"
data-stroke-ticks="false"
data-highlights="false"
data-color-plate="#222"
data-color-major-ticks="#f5f5f5"
data-color-minor-ticks="#ddd"
data-color-numbers="#ccc"
data-color-needle="rgba(240, 128, 128, 1)"
data-color-needle-end="rgba(255, 160, 122, .9)"
data-value-box="false"
data-value-text-shadow="false"
data-color-circle-inner="#fff"
data-color-needle-circle-outer="#ccc"
data-needle-circle-size="15"
data-needle-circle-outer="false"
data-animation-rule="linear"
data-needle-type="line"
data-needle-start="75"
data-needle-end="99"
data-needle-width="3"
data-borders="true"
data-border-inner-width="0"
data-border-middle-width="0"
data-border-outer-width="10"
data-color-border-outer="#ccc"
data-color-border-outer-end="#ccc"
data-color-needle-shadow-down="#222"
data-border-shadow-width="0"
data-font-value="Led"
></canvas>
<canvas data-type="radial-gauge"
data-width="300"
data-height="300"
data-units="°C"
data-title="Temperature"
data-min-value="-50"
data-max-value="50"
data-major-ticks="[-50,-40,-30,-20,-10,0,10,20,30,40,50]"
data-minor-ticks="2"
data-stroke-ticks="true"
data-highlights='[
{"from": -50, "to": 0, "color": "rgba(0,0, 255, .3)"},
{"from": 0, "to": 50, "color": "rgba(255, 0, 0, .3)"}
]'
data-ticks-angle="225"
data-start-angle="67.5"
data-color-major-ticks="#ddd"
data-color-minor-ticks="#ddd"
data-color-title="#eee"
data-color-units="#ccc"
data-color-numbers="#eee"
data-color-plate="#222"
data-border-shadow-width="0"
data-borders="true"
data-needle-type="arrow"
data-needle-width="2"
data-needle-circle-size="7"
data-needle-circle-outer="true"
data-needle-circle-inner="false"
data-animation-duration="1500"
data-animation-rule="linear"
data-color-border-outer="#333"
data-color-border-outer-end="#111"
data-color-border-middle="#222"
data-color-border-middle-end="#111"
data-color-border-inner="#111"
data-color-border-inner-end="#333"
data-color-needle-shadow-down="#333"
data-color-needle-circle-outer="#333"
data-color-needle-circle-outer-end="#111"
data-color-needle-circle-inner="#111"
data-color-needle-circle-inner-end="#222"
data-value-box-border-radius="0"
data-color-value-box-rect="#222"
data-color-value-box-rect-end="#333"
data-font-value="Led"
></canvas>
</div>
</div>
<script>
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(cb) {
var i = 0, s = this.length;
for (; i < s; i++) {
cb && cb(this[i], i, this);
}
}
}
document.fonts && document.fonts.forEach(function(font) {
font.loaded.then(function() {
if (font.family.match(/Led/)) {
document.gauges.forEach(function(gauge) {
gauge.update();
gauge.options.renderTo.style.visibility = 'visible';
});
}
});
});
var timers = [];
function animateGauges() {
document.gauges.forEach(function(gauge) {
timers.push(setInterval(function() {
gauge.value = Math.random() *
(gauge.options.maxValue - gauge.options.minValue) +
gauge.options.minValue;
}, gauge.animation.duration + 50));
});
}
function stopGaugesAnimation() {
timers.forEach(function(timer) {
clearInterval(timer);
});
}
</script>
</body>
</html>
HTML5 Canvas动画仪表盘特效.zip （20个子文件） 
HTML5 Canvas动画仪表盘特效 jiaoben4577 css 
zzsc-demo.css 1KB normalize.css 2KB
scripted.html 3KB index.html 5KB js gauge.min.js 35KB async.html 5KB radial-component.html 7KB lib polyfill.js 3KB SmartCanvas.js 6KB LinearGauge.js 35KB Collection.js 2KB vendorize.js 3KB drawings.js 11KB Animation.js 9KB BaseGauge.js 8KB GenericOptions.js 6KB DomObserver.js 11KB RadialGauge.js 21KB linear-component.html 6KB issue-63.html 3KB资源评论
芝麻粒儿
- 粉丝: 6w+
最新资源
- 单片机智能稳压电源的设计方案.doc
- 山西公务员热点大数据时代个人信息安全危机.doc
- 城乡规划中的测绘地理大数据应用探析.docx
- 中国-东盟网络安全合作与发展研究报告.pdf
- 软件开发模型.docx
- 大数据时代下-公共图书馆读者服务模式的发展研究.docx
- 华东交大软件学院6周软件工程实训总结报告-学号-姓名.doc
- 浅析计算机制图在工程测绘中的应用.docx
- 一.百万公众网络学习工程试题及标准答案(满分100分)docx.docx
- 河北大学MATLAB习题答案.doc
- 企业信息安全规划与技术实现-软件技术.doc
- 电气自动化李存义自动化应用方案设计书.doc
- 医院信息系统建设中虚拟化技术的运用.docx
- 物联网技术节水灌溉控制.doc
- 信息办公平台网络优化设计.docx
- 前端工程师项目实训金牌就业班版(Word).doc
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
