Awesome javascript animation dashboard implemented using HTML5 canvas: gauge. js? 1.1.2-

Today, we will share the implementation of the awesome animation dashboard from guage. js. This class library uses the html5 canvas to generate a dynamic custom dashboard. Not dependent on ...,.

Awesome javascript animation dashboard implemented using HTML5 canvas: gauge. js? 1.1.2

var opts = {  lines: 12, // The number of lines to draw  angle: 0.21, // The length of each line  lineWidth: 0.44, // The line thickness  pointer: {    length: 0.9, // The radius of the inner circle    strokeWidth: 0.108 // The rotation offset  },  colorStart: '#909090',   // Colors  colorStop: '#8FC0DA',    // just experiment with them  strokeColor: '#E0E0E0'   // to see which ones work best for you};var target = document.getElementById('foo'); // your canvas elementvar gauge = new Gauge(target).setOptions(opts); // create sexy gauge!gauge.maxValue = 3000; // set max gauge valuegauge.animationSpeed = 46; // set animation speed (32 is default value)gauge.set(650); // set actual value

If you use jQuery, you can use the following plug-in code:

$.fn.gauge = function(opts) {  this.each(function() {    var $this = $(this),        data = $this.data();     if (data.gauge) {      data.gauge.stop();      delete data.gauge;    }    if (opts !== false) {      data.gauge = new Gauge(this).setOptions(opts);    }  });  return this;};

If you want to quickly create a dynamic meter, gauge. js is definitely a good choice.

The above is the awesome javascript animation dashboard: gauge. js implemented using the HTML5 canvas? For more information about 1.1.2, see PHP Chinese website (www.php1.cn )!