基于HTML5的canvas的温度计 插件

该插件是基于HTML5的canvas实现的温度计
使用方法：
第一步，引入jquery和插件
<script src='./jquery.min.js'></script>
<script src = './goal-thermometer.js'></script>

第二步，添加dom节点

<div style="width:200px;height:230px;float:left;"id="demo"></div>
    <div style="width:250px;height:300px;float:left;"id="demo1"></div>
    <div style="width:300px;height:400px;float:left;"id="demo2"></div>
    <div style="width:350px;height:450px;float:left;"id="demo3"></div>

第三步，创建温度计对象实例

var temper = new canvasPanel();
var temper1 = new canvasPanel();
var temper2 = new canvasPanel();
var temper3 = new canvasPanel();

第四步，设置对应参数

temper3.bgColor = 'rgb(159,159,3)';
temper2.bgColor = 'rgb(3,159,3)';
temper1.bgColor = 'rgb(159,3,3)';

temper2.MaxNum = 200;
temper2.MinNum = 20;

第五步，初始化温度计实例

temper.init('demo');
temper1.init('demo1');
temper2.init('demo2');
temper3.init('demo3');

如果想要实现实时数据变化，只需要调用paintNowValue方法，传入当前值即可。例：

setInterval(function(){
        var num = Math.round(Math.random()*100);
        var num1 = Math.round(Math.random()*100);
        var num2 = Math.round(Math.random()*180)+20;
        var num3 = Math.round(Math.random()*100);

        temper.paintNowValue(num);
        temper1.paintNowValue(num1);
        temper2.paintNowValue(num2);
        temper3.paintNowValue(num3);
},1000);

插件及demo代码链接地址：http://download.csdn.net/detail/xiaoxiazi_32/9813224