基于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