您好,登錄后才能下訂單哦!
這篇文章主要介紹了如何使用HTML5畫布實(shí)現(xiàn)javascript動(dòng)畫儀表板gauge.js?1.1.2,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
使用HTML5畫布實(shí)現(xiàn)的超棒javascript動(dòng)畫儀表板:gauge.js?1.1.2
今天我們分享來自guage.js的超棒動(dòng)畫儀表板實(shí)現(xiàn),這個(gè)類庫使用html5畫布來生成動(dòng)態(tài)的自定義儀表板。不依賴于任何類庫也不實(shí)用任何的CSS或者圖片,完全使用畫布生成。
擁有兩套不同的UI,一個(gè)是儀表盤,一個(gè)類似原來我們介紹的jQuery knob界面。支持UI元素自定義你可以生成自己需要的顏色格式。
主要特性:
無圖片,CSS
無類庫依賴(支持jQuery,但是不是必須的)
高度可配置
分辨率獨(dú)立
動(dòng)畫數(shù)值變化
支持主流瀏覽器
支持瀏覽器:
Chrome
Safari 3.2+
Firefox 3.5+
IE 9
Opera 10.6+
Mobile Safari (iOS 3.2+)
Android 2.3+
如何使用
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 element var gauge = new Gauge(target).setOptions(opts); // create sexy gauge! gauge.maxValue = 3000; // set max gauge value gauge.animationSpeed = 46; // set animation speed (32 is default value) gauge.set(650); // set actual value
如果你使用jQuery,你可以使用如下插件代碼:
$.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; };
如果你希望方便快速的創(chuàng)建一個(gè)動(dòng)態(tài)儀表,gauge.js肯定是一個(gè)不錯(cuò)的選擇。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“如何使用HTML5畫布實(shí)現(xiàn)javascript動(dòng)畫儀表板gauge.js?1.1.2”這篇文章對大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。