未加星标

HTML5 Canvas 计量器绘制工具Canvas Gauges

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

Canvas Gauges 是一个用来在html5 canvas是绘制各种计量器、计量仪图表的javascript工具库。

下面的这里例子,点击仪表图表可以参考源代码,鼠标移到上面可以看到各种一般的动画效果。在手机或平板上,用手指按住它们,动画就会发生。

不需要配置的简单计量器 指南针

animated needle

animated plate

animated needle

animated plate

可灵活配置的仪表图

no-borders

half-gauge ticks horizontal

half-gauge ticks vertical (animated plate)

more custom coloring

线性计量仪器 用法 <!doctype html>
<html>
<head>
<title>Gauges as Components</title>
<script src="gauge.min.js"></script>
</head>
<body>
<!-- Injecting linear gauge -->
<canvas data-type="linear-gauge"
data-width="160"
data-height="600"
data-border-radius="20"
data-borders="0"
data-bar-stroke-width="20"
data-minor-ticks="10"
data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"
data-value="22.3"
data-units="°C"
data-color-value-box-shadow="false"
></canvas>
<!-- Injecting radial gauge -->
<canvas data-type="radial-gauge"
data-width="400"
data-height="400"
data-units="Km/h"
data-title="false"
data-value="0"
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="#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-animation-rule="bounce"
data-animation-duration="500"
data-font-value="Led"
data-animated-value="true"
></canvas>
</body>
</html> 下载地址: Canvas Gauges

HTML5 Canvas 计量器绘制工具

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: HTMLHTML5JavaScriptJava
分页:12
转载请注明
本文标题:HTML5 Canvas 计量器绘制工具Canvas Gauges
本站链接:http://www.codesec.net/view/481187.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(72)