Canvas Gauge v0.1

canvas http://www.fabledweb.com/html5-canvas-gauge.html.


tick_length	Int	80
large_tick_length	Int	110
tick_thickness	Int	6
tick_group_length	Int	9
ticks_groups_begin	Int	0
total_degrees	Int	240
tick_color	String	'#555962'
tick_on_color	String	'#527d98'
bg_image	String	null
gauge_scale	Int	1
animation_duration	Int	550
total_tick	Int	101
show_num	Boolean	true
show_center_num	Boolean	true
center_font_size	Int	200	font-size
center_num_font_family	String	''	font-family
center_offset	Int	0
num_gap	Int	1
num_begin	Int	0
num_font_size	Int	24
num_offset	Int	10	, px
num_font_family	String	'HanHei SC,PingFang SC,Helvetica Neue Thin, Helvetica, STHeitiSC-Light, Arial, sans-serif'	font-family
triangle_height	Int	24	+triangle_offset
triangle_width	Int	16
triangle_offset	Int	8

var my_canvas_obj= document.getElementById("my-canvas");
var gauge= new SOFAGauge({
        "tick_length": 20, // 
        "large_tick_length": 30, // 
        "tick_thickness": 1, //
        "tick_group_length": 9, //
        "ticks_groups_begin": 0, //
        "total_degrees": 240, // 
        "total_tick": 101,  // 
        "tick_color": "#a6a6ad", // 
        "tick_on_color": "#527d98", // 
        "bg_image": null,
        "gauge_scale": 1, // 
        "animation_duration": 1000, //
        "percent": 0, // 
        "canvas": my_canvas_obj // canvas
    });
gauge.render(); //render the configured gauge
gauge.updatePercent(60); //animate the gauge to 60%