5分钟了解基于HTML5 canvas的仪表盘插件-职坐标

5分钟了解基于HTML5 canvas的仪表盘插件

沉沙 2018-07-09 来源：阅读 7535 评论 0

摘要：canvas-gauges是一款基于HTML5 Canvas的仪表盘插件。该仪表盘插件使用纯js来驱动动画，可以制作圆形和线性的仪表盘组件。希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。

简要教程

canvas-gauges是一款基于HTML5 Canvas的仪表盘插件。该仪表盘插件使用纯js来驱动动画，可以制作圆形和线性的仪表盘组件。

安装

可以通过npm来安装该仪表盘插件。

$ npm install canvas-gauges

使用方法

在页面中引入gauge.min.js文件。

HTML结构

使用一个<canvas>来作为仪表盘的容器。

初始化插件

你可以通过js来初始化该仪表盘插件。例如：

var gauge = new LinearGauge({
  renderTo: 'gauge-id',
  colorNumbers: 'red',
  width: 100,
  height: 300
})

也可以直接在HTML代码中使用data-*属性来配置仪表盘。上面的js代码等效于：

<canvas data-type="linear-gauge"
        data-color-numbers="red"
        data-width="100"
        data-height="300"
></canvas>

本文由职坐标整理发布，学习更多的HTML5/CSS3相关知识，请关注职坐标WEB前端HTML5/CSS3频道！

web前端开发html5+css3教程前端编码规范前端知识分享

本文由 @沉沙发布于职坐标。未经许可，禁止转载。

喜欢 | 12

不喜欢 | 3

看完这篇文章有何感觉？已经有15人表态，80%的人喜欢快给朋友分享吧~

后参与评论

加入IT交流圈

JAVA工程师交流群 +加入

大数据架构师交流群 +加入

人工智能Python交流群 +加入

WEB/H5前端交流群 +加入

WEB前端 直通车

海同师资推荐更多>>

热门就业培训班更多>>

HTML5/CSS330天热搜词更多>>